styled-components 结合 React 框架使用，能让其支持 CSS in JS 的写法。比如：
const Button = styled.button`
color: grey;
`;
以上是 SC（styled-components 简称，下同）的一个简单用法，它很方便的创建了一个 Button 组件，然后你就可以在任何地方使用这个组件。
<Button>Test</Button>
这一切是怎么做到的呢？下面我们一步步拆解。
语法规则解释
有人可能对 SC 的怪异语法规则有些费解，它怎么做到直接在 styled 后面获得一个 dom 节点，然后又拼接上一个字符串呢？其实 styled.button 等同于 styled('button')，是一个柯里化后的函数，而函数后可以接模板字符串（两个反引号包起来部分``）是 ES6 的一个新语法特性，相关文档，比如我们可以如下使用函数来接收一个字符串。
const fun = (args)=>{
console.log(args); // [ 'Hello' ]
}
fun`Hello`
并且其间也可以加入表达式。
const fun = (args, exp)=>{
console.log(args); // [ 'Hello ', ', Hi~' ]
console.log(exp); // World
}
const v = "World"
fun`Hello ${v}, Hi~`
可以加入表达式的特性衍生出了 SC 的一种更高级用法，比如以上的 button，如果加入一个背景属性，而此属性会根据 props 而变化，则可以写成以下样子。
const Button = styled.button`
color: grey;
background: ${props => props.background};
`;
刚刚有人可能好奇 styled.button 是怎么就等同于 styled('button') 的，其实也简单，SC 在倒入 styled 时把所有的 dom 节点柯里化后的函数都赋值给了 styled 的同名属性，这样就能使用上面的语法方式了，具体实现就是下面这段代码。
domElements.forEach(domElement => {
styled[domElement] = styled(domElement);
});
组件创建过程
那我们在用 SC 的方式声明了一个 Button 组件后，SC 做了哪些操作呢？
1，首先生成一个 componentId，SC 会确保这个 id 是唯一的，大致就是全局 count 递增、hash、外加前缀的过程。hash 使用了 MurmurHash，hash 过后的值会被转成字符串。生成的 id 类似 sc-bdVaJa
componentId = getAlphabeticChar(hash(count))
2，在 head 中插入一个 style 节点，并返回 className；创建一个 style 的节点，然后塞入到 head 标签中，生成一个 className，并且把模板字符串中的 style 结合 className 塞入到这个 style 节点中。其中 insertRule 方法
evaluatedStyles 是获得到的 style 属性
const style = document.createElement("style");
// WebKit hack
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
const className = hash(componentId + evaluatedStyles);
style.sheet.insertRule（'.className { evaluatedStyles }'， 0）
3，根据解析的 props 和 className 来创建这个 element。
const newElement = React.createElement(
type,
[props],
[...children]
)
newElement.className = "第二部生成的节点"
结论
SC 整体原理还是比较简单的，由于直接用了 ES6 的的字符模板特性，对 style 和 props 部分的解析也比较快，由于需要在运行过程中不断动态创建 Element 并且创建 style 消耗了部分性能。使用过程中也有些要注意的地方，拿最初的 button 举例，如果每次点击那个 Button 都会改变一次 background，你会发现在点 200 次后，SC 会报一个 warning。
Over 200 classes were generated for component styled.button.
Consider using the attrs method, together with a style object for frequently changed styles.
Example:
const Component = styled.div.attrs({
style: ({ background }) => ({
background,
}),
})`width: 100%;`
<Component />
warning 表示创建了超过 200 个类，这是由于每次 background 变化都会生成新的 Element 导致的，此时我们按照提示可以优化成直接使用节点的 style 属性来修改样式，避免重复生成节点类。
styled.button.attrs({
style: props => ({background: props.background})
})``
css in js 的写法有很多优势，此处就不多说了，影响大家使用的很重要一点是性能，SC 团队也一直对外宣称要不断改进性能，20年的 V5 版本做了很多提升，当然由于实现机制，所以再怎么优化也不可能达到原生写法的性能。如果有对性能要求很严的网站建议不要使用，如果想写的快写的爽，用 SC还是很不错的选择。
号称是 Beast Mode 的 V5 版本更新宣传
网友评论