React Native多StyleSheet.create与引用外部样式对象的性能差异及选型

性能差异对比 #

• 方案1和方案2：二者本质没有性能区别，仅代码写法结构不同。StyleSheet.create的作用是将JS侧的样式对象转换为原生端可复用的ID，避免每次渲染都通过桥接传递全量样式对象。如果把getStyles的执行逻辑放到组件外部，全局仅运行一次预创建所有20-30个变体样式，只会在APP启动时产生可忽略的极小开销，后续所有按钮实例都直接复用已注册的原生样式ID，性能最优。如果是在组件渲染时反复调用getStyles，虽然StyleSheet内部有缓存不会重复注册原生样式，但会产生多余的函数调用开销，完全可以避免。
• 方案3：是三种写法里性能最差的。它会根据传入参数动态调用StyleSheet.create，如果没有额外加缓存逻辑，相同参数的样式会被反复创建，多个同变体的按钮实例也会生成重复的样式表，额外占用内存，按钮使用量较大时会产生不必要的累计性能损耗。

推荐方案 #

优先选择调整后的方案1/2：

1. 把getStyles的执行逻辑移到组件外部，全局仅初始化一次所有变体的样式表，组件内部直接根据填充类型、皮肤、状态取对应的样式即可，既保证性能最优，也能集中维护所有按钮样式，修改迭代更方便。
2. 还可以进一步优化代码结构：抽离公共的基础样式（比如不同尺寸的内边距、圆角、字号）和皮肤样式（不同填充、皮肤的颜色、边框属性），最终用样式数组组合使用，比如style={[sizeStyles.large, fillSkinStyles.solid.primary, disabled && fillSkinStyles.solid.primary.disabled]}，可以大幅减少重复代码，也不用单独维护20-30个独立的样式表。

内容的提问来源于stack exchange，提问作者wongx