React内联样式条件渲染回退选null/undefined/空对象等哪个最合适？

最合适的回退取值是null，其次可选用undefined，其余选项均存在逻辑问题或不必要的性能开销。

各选项逐一分析 #

• 回退为{}（空对象）：不推荐
  空对象虽然不会触发报错，但React在做虚拟DOM diff的时候，仍然会遍历这个空对象的属性做样式对比，产生无意义的性能损耗，属于冗余操作。
• 回退为undefined：可用，但规范性弱于null
  React识别到style属性为undefined时，会直接跳过内联样式的挂载和更新，不会产生额外diff开销。唯一问题是部分老旧版本的TypeScript React类型定义，可能会对style传入undefined抛出弱类型警告，新版本已兼容。
• 回退为null：最优解
  这是React官方明确推荐的合法取值，style属性的类型定义本身就支持传入CSSProperties | null。当传入null时，React会直接清空该节点上绑定的所有内联样式，完全跳过样式diff计算，没有任何额外开销，也不会触发任何类型报错。
• 回退为'inherit'/'none'：完全错误
  React的style属性仅支持传入对象、null、undefined三种类型，直接传入字符串会触发运行时类型错误，完全无法正常运行。

核心原理 #

React的内联样式是自定义的对象语法，和原生HTML的style属性支持字符串的逻辑完全不同。React会将传入的style对象的每一个键值对映射为DOM节点的style属性对应值，当传入null或undefined时，React会判定不需要挂载任何内联样式，自动回退到样式表定义的默认样式，符合需求的同时性能最优。

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