专栏首页前端e进阶[第22期] React Conf 2019 样式新方案

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

React Conf 2019 已经正式结束。

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

CSS-in-JS

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

一步步了解这个方案,从用法开始:

如上是这个方案的写法。

通过 styles() 使用样式。

减少样式大小的秘密

对于上述样式文件代码,最终会编译成 c1c2c3 三个 class

出乎意料的是,并没有根据 bluedefault 生成对应的 class,而是根据实际样式值生成 class,这样做有什么好处呢?

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

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

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

正如这个 Demo 所示,正常情况的 class1class2 存在许多重复定义的属性,但换成 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 精彩内容, 敬请期待。

本文分享自微信公众号 - 前端e进阶(gh_ffbd834383c0),作者:南山皮小蛋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端面试官: 你知道source-map的原理是什么吗?

    答:因为目前我们开发时候的源码跟通过webpack构建混淆压缩后的生产环境部署的代码不一样,sourceMap就是一个文件,里面储存着位置信息。

    用户6900878
  • [第18期] 一文搞清 Javascript 中的「上下文」

    上下文是 Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域」 和 「闭包」呢?是不是就很亲切了。

    用户6900878
  • 修复一个因为 scrollbar 占据空间导致的 bug

    这一个因为滚动条占据空间引起的bug, 查了一下资料, 最后也解决了,顺便研究一下这个属性, 做一下总结,分享给大家看看。

    用户6900878
  • SpringMVC类图关系

    package org.springframework.web.servlet {

    zhangheng
  • Java类加载器详解(下)

    这个类中定义了一个加密和解密的算法,很简单的,就是将字节和oxff异或一下即可,而且这个算法是加密和解密的都可以用,很是神奇呀!

    Java团长
  • JVM真香系列:轻松理解class文件到虚拟机(上)

    class文件到JVM中,就相当于我们吃饭,食物吃进了肚子里,不同的营养成分被身体不同的器官吸收。

    田维常
  • Python MRO

    对于Python中的多继承情况,运行时在搜索对象的属性或方法时,需要遵循一定的顺序规则,这个规则称为:Method Resolution Order (MRO)...

    雪飞鸿
  • Glide4.8版本中,Glide是如何加载网络美女图片

    目前市场上主流的图片加载框架就是glide和fresco,个人觉得深入学习一款就可以,glide就是我的选择,在maven上可以看到Glide项目已经到4.11...

    包子388321
  • CSS Modules使用详解

    通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多,但主要有两类。

    IMWeb前端团队
  • 测试mockito

    @RunWith(MockitoJUnitRunner.class) public class BaseMock {

    XING辋

扫码关注云+社区

领取腾讯云代金券