immer 库作用

一、不可变数据更新简化

1. 背景和问题解决

例如：对于一个嵌套较深的对象或数组，创建一个新的副本并更新其中的某个属性可能需要编写大量的代码来确保正确地复制和更新每个层级。

2. Immer 的基本功能

Immer 是一个用于处理不可变数据的库，它允许你以一种更简单的方式编写不可变更新。

3. 简单示例

假设我们有一个简单的对象`state`

const state = {

  name: "John",

  hobbies: ["reading", "coding"],

};

如果要使用普通的 JavaScript 方法更新`hobbies`数组，添加一个新的爱好，可能需要这样写

const newState = {

  ...state,

  hobbies: [...state.hobbies, "swimming"],

};

而使用 Immer，代码会简单很多

import produce from "immer";



const newState = produce(state, (draft) => {

  draft.hobbies.push("swimming");

});

二、在 React 中的应用优势

1. 优化组件性能

例如：在一个复杂的表单组件中，使用 Immer 来更新表单数据状态，可以更方便地控制数据的变化，并确保只有当数据真正改变时，组件才会重新渲染。

2. 简化 Redux 等状态管理中的更新逻辑

在 Redux 等状态管理库中，reducer 函数需要返回一个新的状态，并且不能直接修改传入的旧状态。Immer 可以大大简化这个过程。

三、复杂数据结构处理

1. 嵌套数据的更新便利

例如：一个应用的状态可能包含用户信息（对象），用户信息中又包含多个订单（数组），每个订单包含商品信息（对象）等多层嵌套结构。使用 Immer 来更新其中一个商品的某个属性，只需要在`produce`函数的回调中按照正常的对象和数组访问方式进行修改即可，Immer 会自动处理深层嵌套的不可变更新。

2. 处理循环引用和特殊数据类型

Immer 也能够较好地处理一些特殊情况，如数据结构中的循环引用。它会自动处理这些复杂情况，确保正确地创建不可变的数据副本。对于一些特殊的数据类型，如`Map`和`Set`，Immer 也提供了支持，允许以类似的简单方式进行不可变更新。