Skip to content

Props 不可变性

在 React 中,Props 是只读的,绝不能直接修改!

React 的组件哲学可以概括成一个函数(UI = f(State, Props)):给定相同的输入(state、props),总是能渲染出相同的输出(UI)。

  1. 可预测性
    • Props 是父组件传递给子组件的数据,构成了 自上而下 的数据流,保证数据的单向流。若打破这个原则,数据流将变得混乱,导致状态的变更难以追踪和调试。
  2. 性能优化
    1. 若当 Props 可变时,如果修改对象内部的属性,对象本身引用地址不会改变。React 为了检测变化,那么就会被迫进行“深比较”:
      • 递归遍历对象的所有属性。
      • 逐一对比新旧值的差异。
      • 当 Props 变得复杂时,性能开销会非常大。
    2. 而当 Props 不可变时,任何数据变更都会创建一个全新的对象,其引用地址必然改变。React 的优化策略变得简单高效,只需要进行“浅比较”
      • 通过 oldProps === newProps 判断。
      • 如果引用地址没变,React 就自信跳过整个组件的重新渲染。
      • React.memoPureComponent 也依赖这种浅比较来决定是否重新渲染组件。
  3. 易维护性
    • 降低了组件之间的耦合度,使组件更加独立、可复用。

基于 MIT 许可发布