0 如何理解React State不可变性的原则

⚡ 30 秒速记

• 不可变意味着产出新引用而不是原地修改 —— setState({...s, a: 1}) 而不是 s.a = 1
• 为什么必须这样：React 靠浅比较引用判断有没有变（memo、PureComponent、useEffect 依赖），原地改引用不变就检测不到
• 三个附加收益：可预测（状态变更有迹可循）、可回溯（时间旅行调试）、并发安全（Fiber 可能重复执行渲染）
• ⚠️ 展开运算符是浅拷贝，嵌套第三层的字段改了引用没变，组件照样不刷新
• 深层结构用 Immer 让你"看起来在改"实际产出新对象；更根本的做法是扁平化状态设计

React State 的不可变性，就是更新时创建新引用，而不是直接修改原对象。 这是因为 memo、PureComponent 和依赖项比较通常采用浅比较，原地修改会让引用保持不变，变化可能无法被识别。不可变数据也更容易追踪、保存历史快照，并减少并发渲染中的副作用。要注意展开运算符只是浅拷贝，深层结构可用 Immer，或者直接把状态设计得更扁平。

在 React 中，不可变性是指数据一旦被创建，就不能被修改。React 推崇使用不可变数据的原则，这意味着在更新数据时，应该创建新的数据对象而不是直接修改现有的数据。

以下是理解 React 中不可变性原则的几个关键点：

1. 数据一旦创建就不能被修改：在 React 中，组件的状态（state）和属性（props）应该被视为不可变的。一旦创建了状态或属性对象，就不应该直接修改它们的值。这样可以确保组件的数据在更新时是不可变的，从而避免意外的数据改变和副作用。
2. 创建新的数据对象：当需要更新状态或属性时，应该创建新的数据对象。这可以通过使用对象展开运算符、数组的 concat()、slice() 等方法，或者使用不可变数据库（如 Immutable.js、Immer 等）来创建新的数据副本。
3. 比较数据变化：React 使用 Virtual DOM 来比较前后两个状态树的差异，并仅更新需要更新的部分。通过使用不可变数据，React 可以更高效地进行比较，因为它可以简单地比较对象引用是否相等，而不必逐个比较对象的属性。
4. 性能优化：使用不可变数据可以带来性能上的优势。由于 React 可以更轻松地比较前后状态的差异，可以减少不必要的重新渲染和组件更新，提高应用的性能和响应性。

不可变性的原则在 React 中有以下好处：

• 简化数据变更追踪：由于数据不可变，可以更轻松地追踪数据的变化。这样可以更好地理解代码的行为和数据的流动。
• 避免副作用：可变数据容易引发副作用和难以追踪的 bug。通过使用不可变数据，可以避免许多与副作用相关的问题。
• 方便的历史记录和回滚：不可变数据使得记录和回滚应用状态的历史变得更容易。可以在不改变原始数据的情况下，创建和保存不同时间点的数据快照。