写 React 的同学对不可变数据肯定不陌生。更新个嵌套对象，恨不得写一屏幕展开运算符，一层套一层，看着都头疼。

有没有一种办法，既能像改普通对象那样写代码，又能保证数据不被修改？有，Immer 就是干这个的。

Immer 是什么

Immer 是一个专门处理不可变数据的 JavaScript 库。它的核心就一个函数 produce：你传入当前状态和一个修改函数，在修改函数里随便改，Immer 会自动生成一个新的不可变对象，原对象一点不动。

安装

npm i immer

导入依赖：

// CommonJS
const { produce } = require('immer')

// ESM
import { produce } from 'immer'

怎么用

直接看代码就明白了：

import { produce } from 'immer'

const state = {
  user: {
    name: '张三',
    age: 1,
    address: {
      city: '四川'
    }
  }
}

// 不用 Immer：层层展开，写到手抽
const newState1 = {
  ...state,
  user: {
    ...state.user,
    age: 2,
    address: {
      ...state.user.address,
      city: '北京'
    }
  }
}

// 用 Immer：直接改，简单粗暴
const newState2 = produce(state, draft => {
  draft.user.age = 2
  draft.user.address.city = '北京'
})

两种写法结果完全一样，但第二种明显好写多了。

原理是什么

Immer 用了 ES6 的 Proxy 代理了对 Draft 的所有操作。你看着是在直接修改数据，实际上 Proxy 在后面帮你记录改动了哪里。只有在实际修改的地方才会创建新引用，没改到的部分直接复用原来的，所以性能也不差。

在哪里用

React 项目：用 useState 或 useReducer 管理复杂状态对象时，不用自己写展开运算符。

Redux：Redux Toolkit 里已经内置了 Immer。如果你在用 Redux Toolkit，其实已经在用 Immer 了，只是没察觉到。

任何需要不可变数据的场景：只要浏览器支持 Proxy（IE 不行），都可以用 Immer 来管理复杂状态。

最后

Immer 解决的就是一个痛点：不可变数据写起来太麻烦。它不是给你加新功能，是让你写代码更省事。

非 React 项目也能用，Node.js 和现代浏览器都支持，直接拿来管理复杂状态就很舒服。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/5141