useState直接改数组为什么页面不重新渲染？

核心原因只有一句话：React 内部使用 Object.is 算法对更新前后的状态进行浅比较（Reference Equality），而直接调用 push、splice 等原生方法修改数组，改变的只是数组内部元素，并不会生成新的数组内存地址；当 React 发现新旧状态指针完全相同时，会认定“状态未发生任何变化”，进而触发 Bailout 机制提前退出更新流程，跳过组件的重新渲染。

一、高频踩坑现场：直接修改原数组的代码表现

在日常开发中，许多从原生 JavaScript 或 Vue 转向 React 的开发者，极易写出如下看似合乎逻辑却无法正常生效的代码：

import React, { useState } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState(['学习 React', '掌握 Hook']);

  const handleAdd = () => {
    // 典型错误：直接对原数组进行就地修改
    todos.push('阅读源码');
    
    // 传入同一个数组变量引用
    setTodos(todos); 
  };

  return (
    <div>
      <button onClick={handleAdd}>添加待办</button>
      <ul>
        {todos.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

点击按钮后，在浏览器的控制台打印 todos，会发现数组长度确实从 2 变成了 3，内容也新增了 '阅读源码'。但在页面上，列表视图却没有任何变化，宛如冻结。只有当组件因为其他无关的 State 变动（例如一个计数器）重新渲染时，新增的项目才会突然显示出来。这种隐蔽的表现往往让开发者陷入排查困境。

二、深入底层：JavaScript 内存模型与 React 的浅比较原理

要搞懂页面为什么不重新渲染，必须理解 JavaScript 的引用类型存储机制与 React 调度更新的判定策略。

1. 栈内存首地址与堆内存实体

在 JavaScript 中，基础类型（Number、String、Boolean 等）的值直接保存在栈内存（Stack）中；而数组与对象属于引用类型（Reference Type）。栈内存中保存的仅仅是一个指向堆内存（Heap）具体地址的 16 进制指针（例如 0x00A1），真正的数据元素存放在堆内存对应的空间里。

当我们执行 todos.push('阅读源码') 时，JavaScript 引擎顺着指针找到堆内存中的数组，在尾部开辟了一个槽位写入新字符串。但这一过程中，栈内存中保存的地址指针 0x00A1 根本没有发生任何变动。调用 setTodos(todos) 时，传给 React 的仍然是 0x00A1 这个指针。

2. React 的性能守卫：Object.is 浅比较

React 组件每发起一次状态更新，都会消耗计算资源去遍历虚拟 DOM 树并执行 Diff 算法。为了避免不必要的计算，React 设计了一套非常高效的变更检测机制：使用 Object.is(currentState, nextState) 进行浅比对。

由于引用比对只需要一次极其轻量级的指针等值运算（时间复杂度为 \(O(1)\)），React 不会去递归遍历数组里的每一个元素来检查内容是否变化（深比对在大型复杂状态下时间复杂度为 \(O(N)\)，极其消耗 CPU 资源）。对于 React 来说：

• 如果 Object.is(oldState, newState) === true，React 坚信状态没有发生任何改动；
• 既然状态没有变，后续的虚拟 DOM Diff、DOM 树比对与页面绘制就会被全部阻断。这就是为什么页面纹丝不动的原因。

三、源码视角：React Fiber 架构中的 Eager Bailout 机制

在 React 的 Fiber 架构中，这一跳过更新的行为在内部被称为 Eager Bailout（急切纾困/提前退出）。

当我们在事件处理函数中调用 setTodos(nextState) 时，React 的 Hook 调度器（例如 dispatchSetState）会按以下路径运转：

1. 创建更新对象：构建一个 Update 数据载荷，记录本次操作目标；
2. 尝试提前计算状态（Eager State）：如果当前 Fiber 节点没有处于更高优先级的更新中，React 会尝试预先计算新的状态值：

   const eagerState = basicStateReducer(currentState, action);

3. 执行浅比对拦截：React 立即执行比对：

   if (is(eagerState, currentState)) {
     // 浅比对完全相等，直接 Bailout 提前退出！
     return;
   }

   这里的 is 函数在底层正是标准 Object.is 的 Polyfill。只要两者的引用地址一致，函数立即执行 return，连 Fiber 更新队列都不会进入，组件更新链路在此戛然而止。
4. 进入正常调度：只有当引用不相同时，React 才会给该 Fiber 节点打上更新标记，调度调度器（Scheduler），在空闲帧内重新调用组件函数执行 Render，最后在 Commit 阶段更新浏览器真实 DOM。

四、标准解法：不可变数据更新规范（附完整示例）

既然根因是“内存地址没有改变”，那么解决之道就是遵循 React 的不可变数据理念（Immutability）：永远不要就地修改现有数组，而是通过返回一个全新的数组容器来通知 React 状态已经变更。

1. 添加元素：扩展运算符（Spread Operator）

// 末尾追加：先展开原数组全部项，末尾放入新元素
setTodos(prevTodos => [...prevTodos, '阅读源码']);

// 头部插入：新元素放在前面展开
setTodos(prevTodos => ['置顶任务', ...prevTodos]);

2. 删除元素：使用 filter() 方法

Array.prototype.filter() 会根据过滤条件筛选元素，并天然返回一个全新数组，原数组不受任何干扰：

const handleDelete = (targetId) => {
  setTodos(prev => prev.filter(item => item.id !== targetId));
};

3. 更新特定元素：使用 map() 配合对象浅拷贝

如果数组中存放的是对象，不仅数组本身要返回新数组，被修改的目标对象也必须复制一份新对象，否则依然会因为对象引用相同在子组件或 Memo 中引发异常：

const handleToggleStatus = (targetId) => {
  setTodos(prev => prev.map(item => {
    if (item.id === targetId) {
      // 关键：返回全新对象，覆盖目标属性
      return { ...item, completed: !item.completed };
    }
    return item; // 未修改的项保持原引用即可
  }));
};

4. 排序与翻转：防坑关键（sort / reverse 会破坏原数组）

正确的做法是先浅拷贝再排序，或者使用现代 ES2023 的不可变方法：

// 方案 A：经典安全做法（先扩展解构再排序）
setTodos(prev => [...prev].sort((a, b) => a.order - b.order));

// 方案 B：ES2023 原生不可变方法 toSorted()（Node 20+ / 现代浏览器）
setTodos(prev => prev.toSorted((a, b) => a.order - b.order));

5. 始终优先使用函数式更新（Functional Update）

在异步回调、定时器或并发更新中，直接使用组件作用域里的 todos 容易因闭包捕获旧快照。推荐统一使用 setTodos(prev => [...prev, newItem])，确保始终基于最新的状态快照派生新数组。

五、排查与自查指南：状态不更新时的诊断决策树

当遇到数组状态已改变但界面未重新渲染的情况时，可以依照下面的决策树自上而下逐项排查：

1. 核对是否调用了破坏性原生方法：检查代码中是否存在 push、splice、unshift、pop、shift、sort 或 reverse。一旦存在且直接传入 setter，立即改用展开语法 [...arr] 或 filter/map。
2. 检查嵌套对象的引用是否断开：如果数组内元素是复合对象（如 [{ id: 1, info: { age: 18 } }]），只解构第一层数组无法更新深层依赖；在 map 中需对目标对象也进行解构。
3. 确认是否陷入闭包陷阱：在 useEffect、setTimeout 或 Promise 回调中更新数组时，如果直接引用了外部的 arr 变量，可能获取到了旧的数组快照，请统一改用 setArr(prev => ...)。
4. 检查 JSX 渲染列表的 key 属性：如果使用数组索引 index 作为 key，在重排或局部过滤时，React 会认为节点顺序未变，可能复用旧 DOM 导致显示异常。请务必使用唯一的业务 id 作为 key。

六、总结

React 的响应式核心并非像 Vue 那样通过对数组原型方法进行拦截（Monkey Patching）或依赖 Proxy 深度劫持；React 严格将 State 视为时间线上的不可变快照（Snapshot）。

理解了 Object.is 的浅比较机制与 Fiber 的 Eager Bailout 流程后，只需记住一条核心开发准则：在 React 中更新任何数组或对象，永远不要直接动原变量，永远通过返回全新引用来驱动 UI 渲染。