前端Wiki/词条/不可变更新

不可变更新

定义更新 state 与 props 时始终返回新对象，用引用比较驱动渲染的核心准则

React 的更新检测本质是引用比较：新旧 state 不是同一对象才重渲染。不可变更新要求改数据时绝不修改原对象，而是返回一份拷贝——数组用展开、filter、concat、map，对象用展开与属性覆盖，深层结构借助 Immer 这样的库把过程写得更直观。

直接 push、splice 或者修改对象字段是最隐蔽的 bug 来源：引用没变，React 认为数据没变化，界面停在旧状态；更糟的是若同周期内又比较出新引用，浅比较体系可能渲染出新旧混杂的视图。传 props 也一样，内联对象/数组每次渲染都是新引用，会击穿 memo 的浅比较。

更新数组不用 push/splice，改用展开、filter、map、concat
对象更新用 ...state 展开再覆盖字段，保证返回新引用
深层结构用 Immer 或结构化设计，避免展开符层层手写

JavaScript

import { useState } from 'react';

function Todos() {
  const [todos, setTodos] = useState([
    { id: 1, text: '学 React', done: false },
  ]);

  const add = () => setTodos([...todos, { id: 2, text: '新任务', done: false }]);

  const toggle = (id) => setTodos(
    todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
  );

  return (
    <ul>
      {todos.map((t) => (
        <li key={t.id} onClick={() => toggle(t.id)}>
          {t.done ? '已完成' : '待办'}：{t.text}
        </li>
      ))}
      <button onClick={add}>添加</button>
    </ul>
  );
}

⚠ 常见误区

对 state 数组直接 push，引用未变界面永远不刷新
修改对象内部字段后才想起来更新，浅比较通过视图却不刷新
props 传内联对象，每次渲染新引用，子组件 memo 直接失效

🔗 相关词条函数式更新与批处理 useState 状态基础