要让React组件因对象状态变化而重新渲染，关键是用新引用替代旧引用。展开运算符（...）在右侧使用（如[...arr]、{...obj}）可创建新数组或新对象，触发浅比较生效；对对象数组需map+展开确保每层引用更新；嵌套对象须逐层展开；非对象类型或左侧解构不产生新引用。

要让 React 组件因对象状态变化而重新渲染，关键不是“改值”，而是“换引用”。展开运算符（...）本身不直接“打破引用”，但它在特定用法中能帮你生成新引用——这才是触发重渲染的真正条件。

为什么需要新引用？

React 的 useState 通过浅比较（===）判断状态是否变化。如果传给 setState 的是原数组或原对象的引用，即使内部属性变了，React 也认为“没变”，跳过重渲染。

展开运算符在“右边”使用时（如 [...arr] 或 {...obj}），本质是创建一个**新容器**，把旧内容“拆出来再装进去”，从而产生新引用。

对数组：用 [...oldArray] 创建新数组

适用于新增、删除、替换整个元素等操作。注意：它只做浅拷贝，数组里若存的是对象，对象本身引用未变——所以仅更新数组结构时够用；但若要改对象内部字段，还需进一步处理。

• ✅ 正确（添加新项）：setUsers([...users, newUser]);
• ✅ 正确（删除第 i 项）：setUsers(users.filter((_, idx) => idx !== i)); 或 setUsers([...users.slice(0, i), ...users.slice(i + 1)]);
• ❌ 错误（就地 push）：users.push(newUser); setUsers(users); —— 引用没变

对对象数组：逐个展开对象，确保每个元素也是新引用

如果后端发来一个用户列表，并直接修改了其中某个 user.state，而你只是 setUsers(parsedMessage.users)，那大概率不更新——因为数组和里面的对象都还是老引用。

此时需两层新建：

• 用 map 遍历数组，为每个对象生成新副本；
• 用 {...user} 浅拷贝对象（只要不嵌套深层对象，这就足够）。

示例：

setUsers(parsedMessage.users.map(user => ({ ...user })));

这行代码做了两件事：① map 返回一个新数组；② 每个 {...user} 返回一个新对象。两者引用全换，React 必然重渲染。

对嵌套对象：展开要递进，不能只拆一层

比如状态是 { profile: { name: 'Alice', settings: { theme: 'dark' } } }，只想改 theme：

❌ 错误（只展外层）：setState({ ...state, profile: { ...state.profile, settings: { theme: 'light' } } }); —— 看似对，但 settings 是全新对象，profile 也是新对象，没问题；

✅ 更稳妥写法（显式、易读）：setState(prev => ({ ...prev, profile: { ...prev.profile, settings: { ...prev.profile.settings, theme: 'light' } } }));

关键点：每层被修改的结构，都要用展开保证其引用更新。漏掉一层，那一层的引用就没变，可能引发子组件跳过更新。

什么时候展开没用？

展开运算符不能用于非可迭代对象。比如：

• ❌ [{...obj}] 是合法的，但 {...obj} 本身要求 obj 是普通对象（有键值对）；
• ❌ 对 Map、Set、函数、null、undefined 直接展开会报错；
• ❌ 把展开用在赋值左边（如 const [...a] = arr）是解构，不是创建新引用，跟重渲染无关。

记住口诀：右边展开是拆快递，目的是造新引用；左边三点是收快递，跟状态更新没关系。