关于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 = (