React 中，为什么 State 是不可变的？

知识点图片

在 React 中，State 被设计为不可变（immutable），这是 React 状态管理的核心原则之一。理解这一点对于编写可预测、高性能的 React 应用至关重要。

下面从多个角度解释为什么 State 必须是不可变的：

✅ 1. 触发重新渲染的机制依赖于变化检测

React 使用 浅比较（shallow comparison） 来判断组件是否需要重新渲染。

当你调用 setState(newState) 时，React 会比较新旧 state。
如果 state 是可变对象（比如直接修改原对象），那么即使内容变了，引用地址没变，React 无法检测到变化，也就不会触发重新渲染。
通过创建新的 state（不可变更新），确保每次更新都生成一个新的对象/数组，引用发生变化，React 能正确识别并更新 UI。

jsx

// ❌ 错误：直接修改 state（不会触发重新渲染）
this.state.count = this.state.count + 1;

// ✅ 正确：创建新值并调用 setState
this.setState({ count: this.state.count + 1 });

💡 React Hooks（useState）同理：setCount(prev => prev + 1)，setItems([...items, newItem])

✅ 2. 时间旅行调试（Time Travel Debugging）成为可能

React DevTools（尤其是配合 Redux）支持“时间旅行”功能 —— 可以回退到之前的 state。

前提：state history（历史记录）是基于不可变数据的快照。
如果每个状态都是新的引用，就可以安全地保存和恢复旧状态。
如果是可变的，一旦修改了当前 state，之前的状态也会被污染（“蝴蝶效应”），无法实现真正的时间旅行。

✅ 3. 简化组件逻辑与避免副作用

如果允许直接修改 state：

this.state.user.name = 'Alice'; // 😱

这会导致：

UI 可能不会更新（因为引用没变）。
Bug 难以追踪：谁改了数据？什么时候改的？
并发模式下行为异常（如 React Fiber、Suspense）。

而不可变性强制开发者显式地声明变更，使数据流更清晰、可预测。

✅ 4. 启用性能优化机制

React.memo、shouldComponentUpdate、useMemo、useCallback等依赖对 props/state变化的检测。

React.memo：默认做浅比较，如果 props/state是可变的且被原地修改，可能导致 memoization失效。
PureComponent / shouldComponentUpdate：也依赖浅比较判断是否需要重渲染。

👉 只有 immutable data，这些优化才可靠。

✅ 5. 与函数式编程理念一致

React推崇函数式思想：纯函数 + immutable data。

State updates should be pure functions of previous state and props.
Immutable data天然适合这种范式：无副作用、可回溯、易测试。

这也使得状态管理库如 Redux、Recoil、Zustand等都要求或推荐不可变性。

✅ How to Update State Immutably? （如何正确更新）

Object:

// ❌ Bad: mutation
state.user.age = newAge;

// ✅ Good: create new object (spread or assign)
const newUser = { ...state.user, age: newAge };
setUser(newUser); // or setState({ user: newUser })

Array:

// ❌ Bad: push mutates original array
state.items.push(newItem);

// ✅ Good: create new array
const newItems = [...state.items, newItem]; // add item at end
const updatedItems = items.map(item => 
    item.id === id ? { ...item, done: true } : item // update one item immutably
);

Nested Objects (深拷贝需谨慎):

使用工具库如 Immer.js、lodash.cloneDeep，但注意性能开销。Immer allows "mutating" syntax safely by tracking changes.

import produce from 'immer';

produce(state, draft => {
    draft.user.profile.age = newAge; // looks like mutation, but is safe & immutable under the hood!
});

🔚 Summary：为什么 State Must Be Immutable in React？

Reason	Explanation
🔁 Re-rendering	React relies on reference changes to detect updates
🕰️ Time Travel	Enables debugging tools to track and restore past states
🧼 Predictability	Prevents hidden side effects and makes code easier to reason about
⚡ Performance	Enables optimizations like `memo`, `PureComponent`
📐 Functional Design	Aligns with pure functions and declarative programming

⚠️ Note: JavaScript objects are mutable by default — so “immutable” here means we treat them as if they’re immutable by convention and tooling.

✅ Best Practice: Always treat this.state (class) or the value returned by useState() (hooks) as read-only. Use the setter function (setState, useState's updater) with a new value every time you want to change it.

播面