关于React 中All in js的浅尝辄止(React 柱状图，环形图)

什么是 All in js

前段时间在别人的项目上了解到了styled-components插件，它能够用js来写css，方便的在其中加上需要的逻辑。React本身用过jsx已经把html用js来写了，再加上styled-components，就能够实现All in js 这种编码方式。

如何看待All in js

了解之后跟小伙伴在群里讨论了一下，这种All in js的方式比较有争议，不仅在我们的讨论中，在整个前端社区里也是如此。部分人认为“能用js来做的，必将用js来做”，而且确实在css中直接写js逻辑有吸引人的地方。另一方面像我这种刚了解的人，认为他上手不够平滑，写起来费劲，同时其实大部分css是不需要逻辑的。在与其他人的讨论中也发现了一些其他缺点，比如增加了不少成本，新手不够友好、全局样式覆盖成本高涨、伪类处理复杂、与AntD等组件库结合有坑等。

与此同时 Sass/Less 社区也在飞速发展，尤其是 Stylelint 的成熟，可以通过技术约束的手段来避免 CSS 的 Bad Parts。所以在掘金看到的一篇文章中也号召大家回归 Sass/Less ，可见社区也逐渐抛弃了All in js的做法。但作为一种极客范儿的尝试，浅尝辄止的去了解一下还是有点意思的，这里就简单放一些我尝试过的代码。

styled-components用例

这里使用styled-components来写了个环形图表组件，来展示百分比数据

import React, { PureComponent } from "react";
import styled from "styled-components";
import PropTypes from "prop-types";

// CircleComponment组件的html结构
const CircleComponment = ({ className, precent }) => (
  <div className={className}>
    <div className="precent" />
    <div className="text">
      <strong>{precent}</strong>
      <span>%</span>
    </div>
  </div>
);

// 使用styled-components的styled方法来给CircleComponment组件增加样式后生成一个新的Circle组件
// 由于要使用css动态表现百分比，所以这里的css是需要一些逻辑和计算的，很适合使用styled-components来做
// 但可以看到的是，也写了很多不需要逻辑的纯css，都混到一起之后，显得很长，对阅读不利。
const Circle = styled(CircleComponment)`
  width: 110px;
  height: 110px;
  float: left;
  position: relative;
  line-height: 100px;
  text-align: center;
  margin: 0 20px;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 10px solid #999;
    border-radius: 50%;
    z-index: 1;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 10px solid #38fcc2;
    border-radius: 50%;
    clip: rect(0, auto, auto, 50px);
    z-index: 2;
  }
  .precent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 10px solid
      ${props => {
        const precent = props.precent;
        let color = "";
        if (precent >= 0 && precent <= 50) {
          color = "#999";
        } else if (precent > 50 && precent <= 100) {
          color = "#38fcc2";
        }
        return color;
      }};
    transform: rotate(
      ${props => {
        const precent = props.precent;
        let deg = 0;
        if (precent >= 0 && precent <= 50) {
          deg = precent * 3.6;
        } else if (precent > 50 && precent <= 100) {
          deg = (precent - 50) * 3.6;
        }
        return `${deg}deg`;
      }}
    );
    border-radius: 50%;
    clip: rect(0, auto, auto, 50px);
    z-index: 3;
  }
  .text {
    color: rgba(255, 255, 255, 1);
    font-size: 30px;
    font-family: Futura-Medium;
    line-height: 110px;
  }
`;

/**
 * CircleGraph用于环形图表
 */
export default class CircleGraph extends PureComponent {
  static propTypes = {
    precent: PropTypes.string, // 百分比数值
  };

  render() {
    const { precent } = this.props;
    return <Circle precent={precent} />;
  }
}


// 使用时
<CircleGraph precent="30" />