基于react的组件库主题设计方案

需求背景

单一的视觉不再满足用户体验需求，为提高用户体验，提高应用体验口碑，同时提高开发者效率，我们希望提高组件库的可定制化，因此提供换肤功能以及多种类组件中的样式定制功能，允许用户将应用切换不同主题风格的皮肤，也允许开发者对指定组件进行样式改造。

设计目标

性能一个方案的落地前提得有性能的保障，不重新初始化视图，避免出现闪屏、卡顿等性能缺陷现象，同时也要保障功能稳定，不能存在部分组件不按预期切换主题现象。
可维护性组件库需不断迭代完善，应避免过多的条件判断，避免在单个组件上有过多的主题特殊逻辑，主题的设置和组件的实现应解耦，保证后续可维护可扩展。
可配置可配置分为两部分，一部分为可配置任意全局统一的样式变量，或者某个组件的局部样式；另一部分为强制模式，即指定部分组件不跟随主题变化而变化，保留着本身一种样式。
易用性提供快捷接入主题的接口，降低学习成本和时间成本。
粒度细分组件层面的主题定制、整套组件库的主题定制。开发者可以修改全局样式，比如更换全局中字号的字体大小，也可以局部修改样式，比如按钮组件A的边框颜色。
样式提取暴露出提取当前整套样式的接口，方便开发者提取指定样式做二次操作。比如开发者需要提取当前主题颜色作为视图背景色，可从组件库中获取。
样式可定制内容，包括但不限于： 颜色：品牌色、默认背景色、通用背景色、基本文本颜色、辅助文本颜色、链接色 文本：文本大小，字重，字体间距等 按钮：圆角大小，按钮尺寸，边框尺寸等 图片：图片尺寸，圆角大小等

技术选型

主题定制是大多数组件库都会提供的一个核心样式相关的功能，技术选项上需要考虑的两点：

如何生成一份全局样式配置表
组件如何获取样式配置表

针对以上两点，我们做了一些分析：

如何生成一份全局样式配置表

目前各类组件库最常用的是以下两种方案：

借助gulp/webpack等打包工具相关的插件，配置需要定制的样式变量，在打包时覆盖对应变量值。
重写样式，覆盖样式配置表，生成新的全局样式配置表。

在我们实现的hippy-react-ui中我们并没有提供打包的能力，而是把这部分移交到业务侧处理，原因是现在大部分业务发布时都会对业务进行打包处理，业务侧可能灵活设置打包配置内容，而不受限于组件库打包，另一方面是让业务侧使用组件时可以快速定位组件内部结构，方便排查使用过程中遇到的问题。因此我们选用了以上第二种方案，提供一份默认的样式配置表，而业务侧可以写入重新样式对其覆盖。

组件如何获取样式配置表

组件库是基于hippy-react设计开发的，hippy-react提供的数据的传递有两种：

通过 props 属性自上而下（由父及子）进行传递
Context 提供了一种在组件之间共享值的方式，不必显式地通过组件树的逐层传递 props

第一个方案使用简单，只需要将样式从根节点往下一层层传递即可，但它的缺点也是需要一层层传递。我们的组件库中，复合组件很多，比如列表组件中用到了按钮组件，按钮组件中用到了文本组件，这要求每个组件都需要获取一遍props再往下传递，不仅加大开发成本，对影响了后续开发的可维护性。而第二个方案，我们只需要使用context提供主题的提供者和消费者，在需要使用主题的组件中注入即可，但它有个缺点：每次更新context的容，都会将所有消费到主题的组件重新更新一遍。而针对context的缺点，我们可以放下这个顾虑，因为主题本身也是只消费一遍，在切换主题的时候进行消费，而不是高频的去使用。因此组件获取样式配置表是通过context的方式进行获取。

设计方案

通过上面技术的选型，我们确定了两点：

重写样式，覆盖样式配置表，生成新的全局样式配置表
组件通过Context提高的组件之间共享值的方式，获取样式配置表

生成样式配置表

以上是生成全局样式表的过程，在讲解流程前需补充说明上图中深色/浅色主题：组件库内置两份主题色，主题的切换主要是颜色部分的切换，提供两种主题的原因是我们尽可能通用化配色，比如以下几个例子，背景色/背景图片我们可以随意替换，但作用在其之上的内容，简单分为深/浅两种方案基本可以适用到大部分场景。

样式优先级

组件库自带的样式分为三部分：跟主题相关的深色主题和浅色主题，还有与主题切换无关的其他样式, 在业务侧未指定主题时，组件库默认使用浅色主题的颜色配置表+其他可配置的默认样式值，如字体大小，字重等，业务侧可以重写样式，最终生成的样式表作为提供者Provider给到各个组件使用。

我们暴露一个属性value={} 给业务侧赋值给组件库，业务侧可以在对象中传入指定的主题，比如value={theme: "light"} 或者 value={theme: "dark"}，我们提供一个便利，业务侧可以直接传入value="light"或value="dark" 。如果希望针对某个样式值进行重写，可以 value={textBaseColor: "#555555"}。

在组件库中，我们根据业务侧传入的自定义内容进行判断且合并成新的样式配置表: