Props 不可变性

1. 保障清晰的单向数据流

   • React核心设计：推崇单向数据流
   • 如果子组件可随意修改Props： 数据来源将变得混乱
   • Props不可变性确保： 数据流向清晰、可预测
   • 优势： 当出现问题时，更容易顺着数据流找到问题的根源

2. 性能优化的关键-浅比较

   • 通过比较新旧 Props 和 State 来决定组件是否需要重新渲染
   • 父组件数据更新时，会传递一个全新的Props对象（引用地址不同）
   • 浅比较：比较新旧Props对象的内存地址是否相同

   结论： 不可变性使 React 的 “调和”过程更高效

3. 提升组件的可预测性与调试效率

   • Props不可变： 组件行为更易预测
   • 调试更简单： 明确子组件内部不会“偷偷”修改 Props
   • 问题定位： 若界面显示异常，可更明确的判断时父组件Props传递问题，还是子组件自身State管理问题

4. 便于追踪变化和实现工能

   • 复杂场景应用： 如实现撤销/重做（Undo/Redo）功能
   • 状态管理库（如 Redux）：不可变性使其更容易追踪状态变更历史
   • 核心：每次数据变化都产生新的数据对象，而非在原有对象上修改，便于记录和回朔

面试题1: 子组件尝试直接修改Props，会发生什么？

1. 违反React设计原则，是一种反模式
2. 行为后果：导致数据流混乱，组件行为不可预测
3. 性能影响： 破坏React 依赖不可变性进行的性能优化
4. 总结： 会导致很多潜在的问题，应避免

面试题2: Props 不可变性如何帮助React进行性能优化

1. 关键在于浅比较
2. React.memo 或 PureComponent 的优化手段以来Props 浅比较
3. 反面论证： 如果Props是可以变化的，浅比较将失效

面试题2: 子组件需改变父组件数据，正确做法是？

1. 正确模式： “状态提升”
2. 核心思想： 数据的修改权始终在父组件，数据流依然单向，Props的不可变性得到遵守