[第22期] React Conf 2019 样式新方案

React Conf 2019 已经正式结束。

会上讲了很多激动人心的技术点，这里先介绍一些我比较感兴趣的点， 希望对大家有所启发。

CSS-in-JS

Facebook 使用 Css-in-Js，而今年的 React conf 给出了一种技术方案，将 413 kb 的样式文件体积降低到 74kb！

一步步了解这个方案，从用法开始：

如上是这个方案的写法。

通过 styles() 使用样式。

减少样式大小的秘密

对于上述样式文件代码，最终会编译成 c1、c2、c3 三个 class：

出乎意料的是，并没有根据 blue 和 default 生成对应的 class，而是根据实际样式值生成 class，这样做有什么好处呢？

首先是加载顺序，class 生效的顺序与加载顺序有关，而按照样式值生成的 class 可以精确控制样式加载顺序，使其与书写顺序对应：

这么做永远不会出现头疼的样式覆盖问题。

更重要的是，随着样式文件的增多，class 总量会减少。这是因为新增的 class 涵盖的属性可能已经被其他 class 写到并生成了，此时会直接复用对应属性生成的 class 而不会生成新的：

正如这个 Demo 所示，正常情况的 class1 与 class2 存在许多重复定义的属性，但换成 css-in-js 的方案，编译后的效果等价于将 class 复用并拆解了：

这种方式不仅节省空间、还能自动计算样式优先级避免冲突，并将 413 kb 的样式文件体积降低到 74kb。

原子 CSS

每个类的创建都仅有一个唯一的属性值对。

这个例子展示了 CSS 的原子性。它还展示了如何使用 props 来设置 span 标签的颜色。但是，此代码可以得到进一步优化。

这些东西非常有趣，期待着将来它们的库被发布。

主题方案

如果使用 CSS 变量定义主题，那么换肤就可以由最外层 class 轻松决定了：

字体颜色具体的值由外层 class 决定，因此外层的 class 就可以控制所有子元素的样式：

将其封装成 React 组件，也不需要用 context 等 JS 能力，而是包裹一层 class 即可。

图标方案

下面是设计师给出的 svg 代码：

将其包装为 React 组件：

结合上面提到的主题方案，就可以控制 svg 的主题颜色。

以上就是本篇的全部内容， 希望对你有所帮助。

后续会有很多React Conf 2019 精彩内容， 敬请期待。