要让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）是解构，不是创建新引用，跟重渲染无关。
记住口诀：右边展开是拆快递，目的是造新引用；左边三点是收快递，跟状态更新没关系。
