React 状态不可变更新的性能代价：immer、structuredClone 与手动拷贝对比

React 状态不可变更新的性能代价：immer、structuredClone 与手动拷贝对比

React 的状态更新依赖不可变数据。如果直接修改原对象，React 的浅比较（shallow comparison）无法感知变化，导致 UI 不更新。为此，开发者衍生出多种不可变更新方案：immer 的 Proxy 代理、structuredClone 的深度克隆、展开运算符的手动拷贝。这三种方案在性能特征上差异显著。

本文通过基准测试数据，量化三种方案的性能差异，并给出不同场景下的选择建议。

一、三种方案的实现原理

手动拷贝（展开运算符）：通过...或Object.assign逐层创建新引用，仅浅拷贝，深层属性仍共享引用。

// 手动拷贝：浅层不可变更新 const updateUser = (state, userId, newName) => { return { ...state, users: state.users.map((user) => user.id === userId ? { ...user, profile: { ...user.profile, name: newName } } : user ), }; };

immer：通过 ES6 Proxy 拦截对草稿对象的所有读写操作，只记录变更路径，最终生成一个结构共享的新对象。

import { produce } from 'immer'; // immer produce：声明式不可变更新 const updateUser = (state, userId, newName) => { return produce(state, (draft) => { const user = draft.users.find((u) => u.id === userId); if (user) { user.profile.name = newName; } }); };

structuredClone：浏览器原生 API（Node.js 17+ 支持），执行真正的深度克隆，创建完全独立的副本。

// structuredClone：深度克隆后直接修改 const updateUser = (state, userId, newName) => { const clone = structuredClone(state); const user = clone.users.find((u) => u.id === userId); if (user) { user.profile.name = newName; } return clone; };

二、性能基准：不同数据规模下的对比

以下基准测试在 Chrome 126（V8 引擎）中运行，测试数据为嵌套 3 层的用户列表对象。

// 性能基准测试工具 class ImmutableBenchmark { /** * 生成指定规模的测试数据 * @param {number} userCount - 用户数量 * @returns {object} 包含用户列表的状态对象 */ generateState(userCount) { const users = []; for (let i = 0; i < userCount; i++) { users.push({ id: i, profile: { name: `User${i}`, email: `user${i}@example.com`, }, settings: { theme: 'light', notifications: { email: true, push: false }, }, posts: Array.from({ length: 10 }, (_, j) => ({ id: j, title: `Post ${j}`, tags: ['react', 'javascript'], })), }); } return { users, config: { version: '1.0' } }; } /** * 运行单次基准测试 */ benchmark(method, state, iterations = 1000) { const times = []; for (let i = 0; i < iterations; i++) { const start = performance.now(); method(state); const end = performance.now(); times.push(end - start); } // 去除前后各 5% 的极端值，取平均 const sorted = times.sort((a, b) => a - b); const trimmed = sorted.slice( Math.floor(iterations * 0.05), Math.ceil(iterations * 0.95) ); const avg = trimmed.reduce((a, b) => a + b, 0) / trimmed.length; return { avg: avg.toFixed(4), min: sorted[0].toFixed(4), max: sorted[sorted.length - 1].toFixed(4), p50: sorted[Math.floor(iterations / 2)].toFixed(4), }; } /** * 全面对比三种方案 */ runComparison() { const scales = [10, 100, 1000, 10000]; const results = []; for (const scale of scales) { const state = this.generateState(scale); // 手动拷贝 const manualResult = this.benchmark(() => { return { ...state, users: state.users.map((u) => u.id === 0 ? { ...u, profile: { ...u.profile, name: 'Updated' }, } : u ), }; }, 500); // immer const immerResult = this.benchmark(() => { return produce(state, (draft) => { draft.users[0].profile.name = 'Updated'; }); }, 500); // structuredClone const cloneResult = this.benchmark(() => { const clone = structuredClone(state); clone.users[0].profile.name = 'Updated'; return clone; }, 500); results.push({ scale, manual: manualResult.avg, immer: immerResult.avg, structuredClone: cloneResult.avg, }); } return results; } }

基准测试结果（单位：毫秒/次操作）

从数据中可以得出三个结论：

1. 小规模数据（<100 条）：手动拷贝最快，immer 和 structuredClone 的开销可以忽略。
2. 中等规模（100~1000 条）：immer 开始反超手动拷贝，因为结构共享避免了大规模对象创建。
3. 大规模数据（>1000 条）：structuredClone 性能急剧下降，immer 保持线性增长，手动拷贝因展开运算符创建大量中间对象而落后。

三、内存占用分析

结构共享是 immer 的核心性能优势。以用户列表为例，更新一个用户的名称时：

• 手动拷贝：为每个用户创建新对象（100% 重分配）
• immer：仅复制变更路径上的对象（约 1% ~ 5% 重分配）
• structuredClone：创建整个树的全量副本（100% 分配 + 序列化开销）

// 内存对比验证 function compareMemoryUsage() { const state = generateLargeState(5000); // 测量手动拷贝的内存 const memBefore = performance.memory?.usedJSHeapSize; const manualResult = heavyManualUpdate(state); const memAfterManual = performance.memory?.usedJSHeapSize; // 测量 immer const memBeforeImmer = performance.memory?.usedJSHeapSize; const immerResult = produce(state, (draft) => { draft.users[0].profile.name = 'Updated'; }); const memAfterImmer = performance.memory?.usedJSHeapSize; return { manual: memAfterManual - memBefore, immer: memAfterImmer - memBeforeImmer, }; }

四、选择决策框架

// 场景判断的辅助函数 function recommendStrategy(state: unknown): 'spread' | 'immer' | 'clone' { // structuredClone 不可用时回退到 immer if (typeof structuredClone !== 'function') { return 'immer'; } // 粗略估算对象大小 const size = JSON.stringify(state).length; if (size < 1000) { return 'spread'; } if (size < 50000) { return 'immer'; } // 超大对象且需要完全独立副本时使用 clone return 'clone'; }

五、总结

三种不可变更新方案并非互斥关系，而是不同场景下的最优解。手动拷贝适合小型扁平状态，immer 是复杂嵌套状态的标准答案，structuredClone 适用于需要完全隔离副本的场景。

从性能数据来看，immer 在中等规模以上数据中展现出显著的结构共享优势，而手动拷贝在小数据场景下仍有不可替代的轻量优势。实际选型时，建议以 immer 为默认方案，在性能敏感的小组件中退回展开运算符，在需要跨边界传递的纯数据场景中使用 structuredClone。