# 0 如何理解React State不可变性的原则
⚡ 30 秒速记
- 不可变 = 改状态时产出新引用，不在原对象上改：
setUser({ ...user, name })而不是user.name = name - 原因：
React靠引用比较判断变没变（Object.is、memo、依赖数组），原地改引用不变就当没变 - 附带好处：变化好追踪、能保留历史快照做撤销、并发渲染下渲染函数可能执行多次，不改原数据才安全
- 展开运算符是浅拷贝，改深层字段要把这条路径上每一层都复制
- 嵌套深就用
Immer（useImmer/RTK内置），更根本的是把状态拍平
不可变就是更新状态时给 React 一个新对象，而不是在旧对象上改。 原因很实际：React 判断状态变没变，只比引用是不是同一个，不会逐个字段对比。你写 state.list.push(x) 再 setList(state.list)，引用没变，函数组件直接跳过渲染，memo 子组件也不会更新。所以改数组用 [...list, x]，改对象用 { ...obj, a: 1 }，嵌套深的时候用 Immer，它让你像直接改一样写，底下帮你生成新对象。
在 React 中，不可变性是指数据一旦被创建，就不能被修改。React 推崇使用不可变数据的原则，这意味着在更新数据时，应该创建新的数据对象而不是直接修改现有的数据。
以下是理解 React 中不可变性原则的几个关键点：
- 数据一旦创建就不能被修改：在 React 中，组件的状态（state）和属性（props）应该被视为不可变的。一旦创建了状态或属性对象，就不应该直接修改它们的值。这样可以确保组件的数据在更新时是不可变的，从而避免意外的数据改变和副作用。
- 创建新的数据对象：当需要更新状态或属性时，应该创建新的数据对象。这可以通过使用对象展开运算符、数组的
concat()、slice()等方法，或者使用不可变数据库（如Immutable.js、Immer等）来创建新的数据副本。 - 比较数据变化：React 使用
Virtual DOM来比较前后两个状态树的差异，并仅更新需要更新的部分。通过使用不可变数据，React 可以更高效地进行比较，因为它可以简单地比较对象引用是否相等，而不必逐个比较对象的属性。 - 性能优化：使用不可变数据可以带来性能上的优势。由于 React 可以更轻松地比较前后状态的差异，可以减少不必要的重新渲染和组件更新，提高应用的性能和响应性。
不可变性的原则在 React 中有以下好处：
- 简化数据变更追踪：由于数据不可变，可以更轻松地追踪数据的变化。这样可以更好地理解代码的行为和数据的流动。
- 避免副作用：可变数据容易引发副作用和难以追踪的 bug。通过使用不可变数据，可以避免许多与副作用相关的问题。
- 方便的历史记录和回滚：不可变数据使得记录和回滚应用状态的历史变得更容易。可以在不改变原始数据的情况下，创建和保存不同时间点的数据快照。
