原生解构浅拷贝（如{...obj}、[...arr]）是react中实现不可变状态更新最轻量常用方式，适用于更新顶层字段、替换整个数组、一维基本类型数组及表单字段级更新；嵌套结构需逐层解构，数组操作须避免原地修改，性能优化需避免重复解构并配合usememo与react.memo。
原生解构浅拷贝（如对象展开 {...obj}、数组展开 [...arr]）是 React 中实现不可变状态更新最轻量、最常用的方式。它不依赖第三方库，执行快，内存开销小，特别适合高频交互或中等规模数据场景。关键在于“用对层级”——只在需要触发更新的那层生成新引用，其余未改动部分复用原引用，既保性能，又守不可变原则。
什么时候该用原生解构？
适用于以下明确场景：
- 更新顶层字段：比如
count、isLoaded、searchTerm等扁平属性 - 替换整个数组（非修改某一项）：如接收新列表
setItems([...newData]) - 一维数组内每个元素都是基本类型或已冻结对象：例如
['a', 'b', 'c']或[{id:1}, {id:2}]中每个对象本身不被后续修改 - 表单字段级更新：如
setForm({...form, email: 'new@x.com'})
嵌套结构不能只靠一层解构
这是最容易出错的地方。解构只复制第一层，深层对象仍共享引用：
❌ 错误写法（污染原始状态）：
const newState = {...state};<br>
newState.user.profile.city = 'Shanghai'; // state.user.profile.city 同步变
✅ 正确写法（逐层解构）：
const newState = {<br>
...state,<br>
user: {<br>
...state.user,<br>
profile: {<br>
...state.user.profile,<br>
city: 'Shanghai'<br>
}<br>
}<br>
};
数组更新必须避免原地操作
数组本身是引用类型，直接调用 push、splice、sort 会改变原数组，破坏不可变性：
- 新增项：用
[...arr, newItem]或arr.concat(newItem) - 删除某项：用
arr.filter((_, i) => i !== index)或[...arr.slice(0, index), ...arr.slice(index + 1)] - 更新某项：用
arr.map((item, i) => i === index ? {...item, changed: true} : item)
注意：如果数组里存的是对象，map 中必须对要改的对象做解构（如 {...item, name: 'x'}），否则只是复用了原对象引用。
性能优化的关键习惯
浅拷贝本身很快，但滥用会导致无效重渲染或重复计算：
- 不在组件函数体或
render中反复解构——放到事件处理器、useReducer或useEffect里 - 避免对同一数据多次解构：用
useMemo缓存已构造好的副本，尤其当解构逻辑复杂时 - 配合
React.memo使用：确保子组件 props 是新引用，才能让 memo 生效；若 props 没变引用，即使值变了也不会重渲染 - 大数组（如 >500 项）慎用全量解构：考虑虚拟滚动 + 只解构当前页数据
