React中判断表单字段禁用用state还是调用函数性能更好？

核心结论 #

两种方案的性能差异在你的场景下可以忽略，优先选择方案2是更符合React设计规范的做法。

具体分析 #

• 性能层面 #

  你提供的isDisabled只是简单的全等判断，单次执行开销不足1ms，即使组件频繁重渲，这点计算量也不会对性能造成任何可感知的影响。只有当判断逻辑包含大量循环、嵌套计算等重操作时，才需要考虑缓存计算结果降低开销。

• 规范与可维护性层面 #

  React的state设计原则是仅存储不可推导的源数据，所有可通过源数据计算得到的衍生值都不要重复存储：
  • 方案1把isDisabled存入state，等于同一份逻辑冗余存储了两份，后续如果data有其他修改逻辑，很容易忘记同步更新isDisabled的状态，出现字段禁用状态和实际数据不一致的bug。
  • 方案2的判断逻辑内聚在isDisabled函数中，后续如果禁用规则调整（比如新增判断条件），只需要修改这一个函数即可，不需要改动接口请求、状态赋值的相关代码，维护成本更低。

适用方案1的特殊场景 #

只有满足以下任意一种情况时，才推荐使用方案1：

• 禁用判断逻辑非常复杂（比如遍历数千条数据计算结果），且组件触发重渲的频率极高
• isDisabled后续会被独立于接口返回数据的逻辑修改（比如用户点击按钮临时切换字段禁用状态，和data.fixed的值无关）

补充优化方案 #

如果后续迁移到函数组件+hooks的写法，可以用useMemo缓存衍生值，兼顾性能与状态一致性：

const [data, setData] = useState(null)
// 仅当data变化时才重新计算isDisabled
const isDisabled = useMemo(() => data?.fixed === 1, [data])

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