深入理解React中的不可变性：原理、价值与实践

做React开发的同学，八成刚开始都踩过 "直接改state没反应" 的坑，明明数据改了，页面就是不更新，调试半天发现是没遵守"不可变性"规矩。

这词听着挺技术化，实则是React的"底层逻辑密码"，懂了它不仅能少踩坑，项目维护起来也会轻松很多。

今天咱就从实际开发场景出发，用聊家常的方式把这事儿说透：先搞懂它到底是啥，再讲清React为啥非它不可，最后给一套上手就能用的实操方法。

一、不可变性的核心定义

其实不可变性的意思特直白：数据一旦创建，就不能直接在原身上改。

不是说数据不能变，而是要变就得"换个思路"------先复制一份原数据当副本，在副本上改完之后，用这个新副本替换原数据。原数据就像档案库里的原始文件，只能看不能改，要改就得拿复印件改。

举个常用例子就懂了：JavaScript里的字符串、数字这些基础类型，本身就是"天生不可变"的。比如你写let str = "abc"，想改成"abd"只能写str = "abd"------这其实是新建了个字符串替换掉原来的，原有的"abc"压根没被改动。

但对象、数组就不一样了，默认是"可修改"的，比如let obj = {name: "张三"}，直接写obj.name = "李四"，原对象就被改了，这在React里可是大忌。

React里说的不可变性，主要针对state和props这俩核心东西。简单讲就是：碰到对象、数组这种"能直接改"的引用类型，千万别手欠动原数据，先复制副本改完再替换。

二、React强调不可变性的核心原因

很多人会问：React为啥非要搞这么个规矩？其实不是它矫情，是底层机制逼的。我从实际开发里踩过的坑总结，这东西至少有三个"刚需"好处：

2.1 保障虚拟DOM比对机制生效

React能跑得流畅，全靠"虚拟DOM比对"这个"性能优化神器"。咱们改完state后，React会生成一个新的虚拟DOM树，和旧的树比一比，只把不一样的地方更到真实页面------这比整个页面重画快多了，尤其页面复杂的时候差距特别明显。

但这里有个关键：React比对时只看"数据地址"变没变（浅检查）。我之前就踩过坑：直接改state里的对象属性，比如this.state.user.age = 21，虽然属性值变了，但user对象的地址没动。React一看地址没变，就觉得"数据没改啊"，直接跳过渲染------结果就是数据对不上页面，调试半天才反应过来是没遵守不可变性。

而按规矩来就不会有这问题：改数据时先复制个新对象，新对象的地址和原数据不一样。React一看地址变了，就知道"哦，数据更新了"，立马执行渲染，页面和数据就对上了。

2.2 简化状态管理与问题排查

做过中大型项目的同学都懂，状态在组件间传过来传过去，改来改去的特别容易乱。我之前维护过的一个项目，里面有人直接改全局状态，出了bug后查哪里改的，原数据早被覆盖了，连历史状态都看不着，硬生生查了一下午。

但遵守不可变性后，每次改状态都会生成新副本，相当于给状态"拍了张快照"。比如用Redux的时候，调试工具能直接回溯每次状态变化，哪个操作改了什么数据一目了然，找bug效率翻倍。而且原状态不动，多个组件共用一个状态也不怕"串改"------你改你的副本，我用我的原数据，互不干扰。

2.3 适配性能优化工具

React的PureComponent和React.memo是咱们常用的"性能优化小助手"，原理很简单：检查props和state的地址没变，就认为组件不用重新渲染，直接复用之前的结果。

这里再插个坑：我之前用React.memo包裹组件，结果改了props里的对象属性后，组件没重新渲染。查了才发现是直接改的原对象，地址没变，React.memo以为数据没改。后来按不可变性规矩传了新对象，地址变了，优化工具立马正常工作。所以说，想用好这些优化工具，不可变性是前提。

三、React中不可变性的实现方式

其实实现不可变性的核心思路就一条：对象、数组这种引用类型，别直接碰原数据，先复制副本再改。这里分两种场景说------简单数据用原生语法就够，复杂数据建议用工具库，效率更高。

3.1 简单场景：原生语法实现

如果只是单层对象、简单数组，根本不用装额外工具，JavaScript自带的扩展运算符（...）、数组map/filter这些方法就够用。重点记着：用那些"不碰原数据，返回新结果"的方法就行。

对象的不可变更新

新手最容易犯的错就是直接改state里的对象属性，这里拿用户信息举例，对比下错误和正确写法，一看就懂：

jsx 复制代码

// 错误：直接改原state里的对象，React认不出来
this.state = { user: { name: '张三', age: 20 } };
this.state.user.age = 21; // 直接改原对象，地址没变

// 正确：用...复制原对象，改完弄个新对象
const newUser = { ...this.state.user, age: 21 }; // 把原user的属性都复制过来，只改age
this.setState({ user: newUser }); // 新对象地址不一样，React能识别

数组的不可变更新

数组的坑更多，很多方法会"悄悄改原数组"。比如push、pop、splice这些，我刚开始学的时候没少踩坑；而map、filter这些方法会返回新数组，用着就很放心。下面拿普通数组举例，把增删改查的正确写法都列出来了：

jsx 复制代码

// 错误：直接改原state数组
this.state = { list: [1, 2, 3] };
this.state.list.push(4); // 直接改原数组，地址没变

// 正确方式1：用扩展运算符复制后加元素
const newList = [...this.state.list, 4]; // 复制原数组，再加4
this.setState({ list: newList });

// 正确方式2：用concat方法拼接
const newList = this.state.list.concat(4); // concat返回新数组
this.setState({ list: newList });

// 正确方式3：改数组里的某个元素（用map）
const newList = this.state.list.map(item => 
  item === 2 ? 20 : item // 把2改成20，其他不变
);
this.setState({ list: newList });

// 正确方式4：删数组里的元素（用filter）
const newList = this.state.list.filter(item => item !== 2); // 过滤掉2
this.setState({ list: newList });

3.2 复杂场景：用Immer库偷懒又省心

要是碰到"对象套对象再套数组"的复杂结构，比如用户列表里每个用户有地址信息，地址里还有省市街道，用原生扩展运算符改就得一层一层复制------写起来啰嗦不说，稍不注意漏复制一层，就会改成原数据。这时候强烈推荐Immer库，简直是复杂数据的"救星"------能让你用"直接改数据"的舒服写法，背后自动帮你生成新副本。

为啥非要用Immer？

最大的好处就是"降本增效"。不用再死记硬背多层扩展运算符的写法，直接用平时改普通对象的赋值、push方法就行，Immer会帮你搞定不可变性。我团队里的新手，学Immer不到半小时就上手了，比教他们写原生多层复制快多了。

上手三步走

第一步先安装，npm和yarn都行，命令记不住直接查文档，很简单：

csharp 复制代码

npm install immer --save
// 或者
yarn add immer

第二步记核心函数：Immer就一个核心函数produce，接收两个参数------第一个是要改的原数据，第二个是修改逻辑的函数。

第三步关键操作：在修改逻辑里，直接改一个叫draft的"草稿"对象就行。这里划重点：你改的不是原数据，是Immer生成的代理副本，最后produce会返回一个全新的不可变数据，原数据毫发无损。

Immer最核心的函数是produce，它接收两个参数：第一个是"要修改的原数据"，第二个是"修改逻辑的函数"。修改逻辑里可以直接"改"一个叫draft的草稿对象，最后produce会返回一个新的不可变数据，原数据完全不动。

实战对比：原生写法vs Immer写法

先看个嵌套对象的例子，比如改用户的年龄和爱好，原生写法要两层复制，Immer写法就清爽多了：

jsx 复制代码

// 1. 引入produce
import { produce } from 'immer';

// 2. 原状态（嵌套对象）
this.state = {
  user: {
    name: '张三',
    info: {
      age: 20,
      hobby: ['打球', '看剧']
    }
  }
};

// 3. 用Immer修改（直接改draft，不用手动复制）
const newState = produce(this.state, (draft) => {
  // 直接改草稿对象的嵌套属性
  draft.user.info.age = 21;
  // 直接给数组push元素
  draft.user.info.hobby.push('听歌');
});

// 4. 更新状态（newState是新对象，地址已变）
this.setState(newState);

再看个数组套对象的场景，比如待办列表改任务状态，Immer的优势更明显：

jsx 复制代码

// 原状态：数组里装对象
this.state = {
  list: [
    { id: 1, title: '学习React', done: false },
    { id: 2, title: '理解不可变性', done: false }
  ]
};

// 用Immer把id=2的任务改成"已完成"
const newList = produce(this.state.list, (draft) => {
  // 找到要改的元素，直接改属性
  const target = draft.find(item => item.id === 2);
  if (target) target.done = true;
});

this.setState({ list: newList });

看出来没？不管嵌套多深，Immer都不用你管"怎么复制"，只管"要改啥"就行，代码量少了一半还多，出错率也低了。

这里补个更真实的场景：我之前做过一个用户管理系统，用户数据是"数组里套对象，对象里套地址对象"，要改某个用户的省份。用原生写法写了一堆复制代码，后来重构用了Immer，几行就搞定了，后来维护的时候一眼就看懂逻辑。

kotlin 复制代码

// 之前的原生写法，光复制就写了一堆
this.state = {
  users: [
    { id: 1, name: '张三', address: { province: '广东', city: '深圳' } },
    { id: 2, name: '李四', address: { province: '浙江', city: '杭州' } }
  ]
}

const newUsers = this.state.users.map(user => {
  if (user.id === 1) {
    // 外层用户对象要复制，内层地址对象也要复制，层级多了很容易漏
    return {
      ...user,
      address: { ...user.address, province: '广西' }
    }
  }
  return user;
})
this.setState({ users: newUsers });

这种写法要是嵌套个三四层，简直是灾难，换成Immer之后，逻辑一下就清晰了。

Immer的实现原理（简单了解）

可能有人好奇：为啥改draft就能生成新数据？其实背后是ES6的Proxy代理机制------Immer给原数据建了个"代理替身"，你改draft的时候，它在背后悄悄记录你改了哪些地方，最后根据这些记录生成新数据，原数据始终没动。不用深究其原理，会用就行。

Hooks项目必看：Immer配合useState

首先得安装Immer库，用npm或yarn都行：

csharp 复制代码

// npm安装
npm install immer --save

// yarn安装
yarn add immer

Immer最常用的是produce函数，接收两个参数：第一个是"要修改的原数据"，第二个是"修改逻辑的函数"。咱们用刚才的嵌套数据例子改写一下，感受下简洁度：

jsx 复制代码

// 引入produce函数
import { produce } from 'immer';

// 原来繁琐的修改，用Immer后变成这样
const newUsers = produce(this.state.users, draft => {
  // 直接找id为1的用户，改地址的省份------看似直接改，实际改的是代理副本
  const targetUser = draft.find(user => user.id === 1);
  if (targetUser) {
    targetUser.address.province = '广西';
  }
});
this.setState({ users: newUsers });

对比之前的代码，是不是清爽多了？不用再层层写扩展运算符，直接像"改普通数据"一样写逻辑就行，Immer会自动处理不可变性。

Immer在React Hooks中的用法

现在新项目基本都用Hooks了，Immer和useState搭配起来更是绝配。之前改复杂状态要先定义新变量再set，用Immer直接就能在set里写逻辑，代码更简洁。拿最常见的待办列表举例：

jsx 复制代码

// 1. 引入produce和useState
import { produce } from 'immer';
import { useState } from 'react';

function TodoList() {
  // 2. 用useState定义复杂状态（数组套对象）
  const [todos, setTodos] = useState([
    { id: 1, title: '学Immer用法', done: false },
    { id: 2, title: '练React Hooks', done: false }
  ]);
  
  // 3. 用Immer修改状态：标记任务为已完成
  const finishTodo = (id) => {
    setTodos(produce(draft => {
      // 直接操作draft，不用手动生成新数组
      const target = draft.find(todo => todo.id === id);
      if (target) target.done = true;
    }));

  // 4. 用Immer修改状态：添加新任务
  const addTodo = (title) => {
    setTodos(produce(draft => {
      // 直接push，Immer会处理成新数组
      draft.push({
        id: Date.now(), // 用时间戳当唯一id
        title,
        done: false
      });
    }));
  };

  return (
    <div>
      <button onClick={() => addTodo('新任务')}>添加任务</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} onClick={() => finishTodo(todo.id)}
            style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            {todo.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

这段代码直接能跑，你会发现：用Immer之后，改状态和写普通JavaScript逻辑没啥区别，却完全遵守了不可变性规矩。

用Immer必避的两个坑

虽然Immer好用，但我团队里的新手还是踩过坑，这里提醒两句：

别手欠改原数据：有同学以为用了Immer就可以随便改原数据，结果发现状态乱了。记住：Immer只保护draft，原数据该不能动还是不能动。

四、新手最容易踩的3个坑

不可变性的逻辑不算复杂，但新手很容易在细节上踩坑。结合我自己和团队的踩坑经历，总结了三个高频坑，避开就能少走很多弯路。

只改draft里的东西：修改逻辑里只能操作draft对象，别去改外面的变量。有个新手曾在produce里改了函数外的数组，结果没生效，就是因为没改draft。

给基础类型做"多余复制"

有新手以为"所有数据都要复制"，连数字、字符串都要搞个副本。其实基础类型本身就是不可变的，根本不用多此一举。比如：

嵌套数据漏复制层级

jsx 复制代码

// 多余的写法：基础类型不用复制
const newAge = { ...this.state.age }; // 没必要，age是数字

// 正确写法：直接赋值就行
const newAge = this.state.age + 1;
this.setState({ age: newAge });

这是最常见的坑！用原生写法改嵌套对象时，只复制外层，忘了复制内层，结果改了原数据。

只有对象、数组这种引用类型才需要按不可变性规矩来，基础类型随便折腾。

比如改用户地址：

jsx 复制代码

// 错误：只复制外层对象，内层address还是原引用
const newUser = { ...this.state.user };
newUser.address.province = '广西'; // 改的还是原数据的address

// 正确：内层对象也要复制
const newUser = {
  ...this.state.user,
  address: { ...this.state.user.address, province: '广西' }
};

嵌套一层就要复制一层，要是嵌套三层，光复制代码就够写半天。所以说，嵌套深了就别硬扛了，直接上Immer。

乱用数组"危险方法"

数组方法分"安全"和"危险"两类，新手很容易记混。"危险方法"会直接改原数组，绝对不能用在state数组上；"安全方法"返回新数组，随便用。我整理了个清单，记不住就存手机里：

五、总结

perl 复制代码

// 危险方法（直接改原数组，禁用！）
push、pop、splice、sort、reverse

// 安全方法（返回新数组，推荐用！）
map、filter、concat、slice、[...arr]（扩展运算符）

很多人刚开始觉得不可变性"多此一举"------直接改多省事，为啥要绕一圈复制？我刚开始也这么想，但写多了就明白：这规矩不是为了为难人，是为了让项目"更稳"。

要是非要用sort排序咋办？先复制再排序就行：[...this.state.list].sort()，这样改的是副本，原数组不动。

最后给个实操口诀，记着就行："简单数据用原生，扩展运算map顶；复杂嵌套别硬撑，Immer来救场最省心；基础类型不用整，对象数组守规矩------不碰原数据，改完换副本"。

刚开始可能觉得麻烦，但练个两三次就习惯了。等你下次改状态不用想就知道"先复制再修改"时，就会发现：项目里因状态混乱导致的bug少了，调试时能快速定位问题了------这就是不可变性的真正价值。