浅拷贝本身不触发重渲染，而是让React通过引用变化判断是否需要重新渲染；必须用浅拷贝而非直接修改，因React依赖不可变更新原则来检测状态变更。
浅拷贝本身不“触发”重渲染，它只是让 React 能检测到状态引用变了——而 React 正是靠这个引用变化来决定是否需要重新渲染组件。
为什么必须用浅拷贝（而不是直接修改）
React 的 useState 和 useReducer 都遵循不可变更新原则：你必须返回一个新引用，不能就地修改原对象或数组。否则 React 会认为状态没变，跳过渲染。
- ❌ 错误写法（原地修改，引用不变）：
todos[0].done = true; setTodos(todos); - ✅ 正确写法（浅拷贝生成新引用）：
setTodos(todos.map(todo => todo.id === 1 ? {...todo, done: true} : todo));
常用且安全的浅拷贝方式
对不同结构，选对方法才能既高效又不出错：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
-
普通对象：用展开运算符
{...obj}或Object.assign({}, obj) -
一维数组：用
[...arr]、arr.slice()或arr.concat() -
更新数组某一项：用
map返回新数组，只替换目标项（保持其余项引用不变） -
添加/删除项：用
[...arr, newItem]或arr.filter(...)，确保返回全新数组
注意浅拷贝的“一层限制”
浅拷贝只复制第一层，嵌套对象仍共享引用。如果要改深层字段，必须逐层展开：
立即学习“Java免费学习笔记（深入）”；
- ❌ 错误（只浅拷贝外层，
meta还是原引用）：{...todo, meta: { ...todo.meta, tags: [...todo.meta.tags, 'new'] } } - ✅ 正确（确保所有被改的嵌套层级都用展开）：
{...todo, meta: { ...todo.meta, tags: [...todo.meta.tags, 'new'] } }——这其实已正确，关键在meta本身也要被展开，不能漏
配合 React.memo 实现真正局部更新
光有浅拷贝还不够。如果列表项是独立组件，还要防止它因 props 引用变化而误更新：
- 用 React.memo 包裹子组件，让它只在 props 引用变化时才重渲染
- 确保传给子组件的每一项都是新对象（如
{...item}），不是原数组里的旧引用 - 避免在
map中内联定义函数（如onClick={() => doX(id)}），改用 useCallback 提前缓存
