使用不可变数据结构可提升React应用性能，关键在于通过生成新对象触发更新。结合Immer等工具利用结构共享复用未变更部分，减少复制开销。推荐使用Immer或Immutable.js管理复杂状态，配合React.memo、useMemo优化渲染。避免对无变化数组频繁重建或传递新引用，应在真正变化时才生成新对象，平衡不可变性与性能。
JavaScript中使用不可变数据结构能提升应用性能，尤其是在React等声明式框架中。关键在于避免直接修改原对象，而是生成新对象来触发更新。这看似会增加内存开销，但通过合理优化，可以大幅减少不必要的复制和比较。
使用结构共享（Structural Sharing）
结构共享是指在创建新对象时复用未变化的部分，只复制被修改的路径。这样既保证了不可变性，又控制了性能损耗。
例如使用 Immer 库：
import produce from 'immer';
const state = { user: { name: 'Alice', age: 25 } };
const newState = produce(state, draft => {
draft.user.age = 26;
});
// 只有 user.age 被改变，其他引用保持不变
Immer 内部通过代理（Proxy）跟踪变化，自动生成不可变更新，开发者无需手动深拷贝。
立即学习“Java免费学习笔记（深入）”；
选择高效的不可变库
原生操作如 ... 扩展符适合浅层合并，深层嵌套时容易出错且效率低。可选用专门库提升效率。
- Immutable.js：提供 Map、List 等持久化数据结构，内部采用 trie 树实现高效更新与比较
- Immer：语法更贴近原生 JS，适合复杂对象状态管理
- zustand + immer 或 Redux Toolkit：内置 Immer 支持，简化 reducer 编写
注意：Immutable.js 返回的是特殊对象，需调用 .toJS() 转换，可能引入额外心智负担。
优化组件渲染与比较
不可变数据配合 React.memo、useMemo 和 useCallback 可避免无效重渲染。
示例：
const Profile = React.memo(({ user }) => {
return <div>{user.name}</div>;
});
// 只有当 user 引用变化时才重新渲染
若每次传递新对象，即使内容相同也会触发更新。因此确保不可变更新只在真正变化时生成新引用。
避免过度不可变
不是所有场景都需要深度不可变。简单状态或局部变量可直接修改。重点保护共享状态（如 store 中的数据）。
常见误区：
- 对数组每个元素都展开重建：
arr.map(item => ({ ...item }))—— 若无变化应保留原引用 - 频繁生成新对象用于 props —— 应结合 useMemo 缓存
基本上就这些。核心是平衡不可变带来的可预测性与性能消耗，借助工具让更新更高效。不复杂但容易忽略细节。
