styled-components 运行原理

styled-components 结合 React 框架使用,能让其支持 CSS in JS 的写法。比如:

const Button = styled.button`
  color: grey;
`;

以上是 SC(styled-components 简称,下同)的一个简单用法,它很方便的创建了一个 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%;`

warning 表示创建了超过 200 个类,这是由于每次 background 变化都会生成新的 Element 导致的,此时我们按照提示可以优化成直接使用节点的 style 属性来修改样式,避免重复生成节点类。

styled.button.attrs({
  style: props => ({background: props.background})
})``

css in js 的写法有很多优势,此处就不多说了,影响大家使用的很重要一点是性能,SC 团队也一直对外宣称要不断改进性能,20年的 V5 版本做了很多提升,当然由于实现机制,所以再怎么优化也不可能达到原生写法的性能。如果有对性能要求很严的网站建议不要使用,如果想写的快写的爽,用 SC还是很不错的选择。
号称是 Beast Mode 的 V5 版本更新宣传

你可能感兴趣的:(styled-components 运行原理)