什么是 Immer
Immer 是一个小型的 JavaScript 库，它让你可以以可变的方式来编写代码，而最终得到的是不可变的数据。想象一下，你可以直接拿起积木修改积木塔，而最后呈现给 React 的是一个全新搭建好的积木塔。这就是 Immer 为我们做的事情。它使用了 Proxy（在现代 JavaScript 环境中）或 ES5 的 Object.defineProperty 来实现这一魔法。
为什么 React 需要不可变状态
在深入了解 Immer 之前，我们先搞清楚为什么 React 要求我们不可变地更新状态。在 React 中，当状态发生变化时，React 会通过比较新旧状态来决定是否重新渲染组件。如果我们直接修改状态，React 可能无法检测到状态的变化，从而导致组件不会重新渲染。而不可变更新会创建一个新的状态对象，React 可以很容易地检测到这个变化并正确地重新渲染组件。
不使用不可变更新的问题示例
下面是一个简单的 React 组件示例，展示了不使用不可变更新可能会遇到的问题：
javascript
import React, { useState } from 'react';
// 定义一个简单的 React 组件
const App = () => {
// 使用 useState 钩子来管理状态，初始状态是一个包含 name 属性的对象
const [user, setUser] = useState({ name: '张三' });
// 定义一个函数来更新用户的名字
const updateName = () => {
// 直接修改 user 对象，这违反了 React 的不可变更新原则
user.name = '李四';
// 尝试设置状态，但 React 不会检测到变化，因为引用没有改变
setUser(user);
};
return (
<div>
<p>User name: {user.name}</p>
<button onClick={updateName}>Update Name</button>
</div>
);
};
export default App;在这个例子中，当我们点击按钮时，user.name 被直接修改了，但 React 不会重新渲染组件，因为 setUser 接收的还是同一个对象引用。
使用不可变更新的正确做法
为了让 React 能够正确检测到状态变化，我们需要使用不可变更新。以下是使用不可变更新的示例：
javascript
import React, { useState } from 'react';
// 定义一个简单的 React 组件
const App = () => {
// 使用 useState 钩子来管理状态，初始状态是一个包含 name 属性的对象
const [user, setUser] = useState({ name: '张三' });
// 定义一个函数来更新用户的名字，使用不可变更新
const updateName = () => {
// 创建一个新的对象，包含更新后的属性
const newUser = { ...user, name: '李四' };
// 设置新的状态
setUser(newUser);
};
return (
<div>
<p>User name: {user.name}</p>
<button onClick={updateName}>Update Name</button>
</div>
);
};
export default App;在这个例子中，我们使用展开运算符 ... 创建了一个新的对象 newUser，并将更新后的 name 属性赋值给它。然后将 newUser 传递给 setUser，这样 React 就能检测到状态的变化并重新渲染组件。
Immer使用
安装 Immer
在开始使用 Immer 之前，我们需要先安装它。可以使用 npm 或 yarn 来安装：
javascript
npm install immer
# 或者
yarn add immerImmer 的基本使用方法
创建一个 draft
Immer 的核心概念是 draft（草稿）。当你使用 Immer 时，它会给你一个可以直接修改的 draft 对象，而不是原始的状态对象。在你完成对 draft 的修改后，Immer 会基于这些修改创建一个新的不可变状态对象。
下面是一个使用 Immer 的简单示例：
javascript
import { useState } from "react";
import {produce} from 'immer';
function App() {
// 使用 useState 钩子来管理状态，初始状态是一个包含 name 属性的对象
const [user, setUser] = useState({ name: '张三' });
// 定义一个函数来更新用户的名字，使用 Immer 的 produce 函数
const updateName = () => {
// 使用 produce 函数创建一个 draft 对象
const newUser = produce(draft => {
// 直接修改 draft 对象，就像修改普通对象一样
draft.name = '李四';
});
// 设置新的状态
setUser(newUser);
};
return (
<>
<p>User name: {user.name}</p>
<button onClick={updateName}>Update Name</button>
</>
);
}
export default App;在这个例子中，produce 函数可以接收两个参数：原始状态 user 和一个回调函数。回调函数接收一个 draft 对象，我们可以直接在这个 draft 对象上进行修改。当回调函数执行完毕后，produce 会返回一个新的不可变状态对象 newUser，我们将这个新对象传递给 setUser 来更新状态。
处理数组状态
Immer 特别擅长处理嵌套状态。在 React 应用中，状态往往是嵌套的对象或数组，手动进行不可变更新会变得非常复杂。而使用 Immer，我们可以像处理普通对象一样轻松地修改嵌套状态。
数组对象示例
下面是一个处理嵌套对象状态的示例：
javascript
import { useState } from "react";
import { produce } from "immer";
const List = () => {
const [list, setList] = useState([
{ id: "1", title: "问卷一", isPublished: false },
{ id: "2", title: "问卷二", isPublished: true },
{ id: "3", title: "问卷三", isPublished: false },
{ id: "4", title: "问卷四", isPublished: true },
]);
const deleteEdit = (id: string) => {
//使用immer
const newList = produce((draft) => {
return draft.filter(item => item.id != id);
});
setList(newList);
//不可变更新
// const list1 = list.filter(item=>item.id !=id)
// setList(list1);
};
const addEdit = () => {
//使用immer
const newList = produce((draft) => {
draft.push({
id: new Date().toString(),
title: "新闻卷" + new Date(),
isPublished: false,
});
});
setList(newList);
//不可变更新
// setList(
// list.concat({
// id: new Date().toString(),
// title: "问卷五",
// isPublished: false,
// })
// );
};
return (
<>
<h1>问卷调查</h1>
<div>
<div>
<button onClick={addEdit}>新增问卷</button>
</div>
{list.map((item) => {
const { id, title, isPublished } = item;
return (
<div key={id}>
<strong>{title}</strong>
{isPublished ? (
<span style={{ color: "green" }}>已发布</span>
) : (
<span>未发布</span>
)}
<button onClick={() => deleteEdit(id)}>删除问卷</button>
</div>
);
})}
</div>
</>
);
};
export default List;在这个例子中，我们有一个嵌套的数组 state，包含多个对象使用 Immer，我们可以直接在 draft 对象上修改嵌套数组中的元素，而不需要手动创建新的数组和对象。
在 Redux 中使用 Immer
Immer 也可以和 Redux 一起使用，让 Redux 的 reducer 函数更加简洁和易于维护。在 Redux 中，reducer 函数必须返回一个新的状态对象，而不能直接修改原始状态。使用 Immer，我们可以在 reducer 函数中以可变的方式编写代码。
Redux 示例
javascript
import { createStore } from 'redux';
import produce from 'immer';
// 定义初始状态
const initialState = {
users: [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
],
selectedUser: null
};
// 定义 reducer 函数，使用 Immer 的 produce 函数
const reducer = produce((draft, action) => {
switch (action.type) {
case 'ADD_USER':
// 直接在 draft 对象的 users 数组中添加一个新用户
draft.users.push(action.payload);
break;
case 'UPDATE_USER':
// 找到要更新的用户
const userToUpdate = draft.users.find(user => user.id === action.payload.id);
if (userToUpdate) {
// 直接修改用户的属性
Object.assign(userToUpdate, action.payload);
}
break;
case 'SELECT_USER':
// 直接设置 selectedUser 属性
draft.selectedUser = action.payload;
break;
default:
break;
}
}, initialState);
// 创建 Redux 商店
const store = createStore(reducer);
// 订阅商店的变化
store.subscribe(() => {
console.log('Current state:', store.getState());
});
// 分发一个 ADD_USER 动作
store.dispatch({
type: 'ADD_USER',
payload: { id: 3, name: 'Bob', age: 35 }
});
// 分发一个 UPDATE_USER 动作
store.dispatch({
type: 'UPDATE_USER',
payload: { id: 1, name: 'Updated John', age: 26 }
});
// 分发一个 SELECT_USER 动作
store.dispatch({
type: 'SELECT_USER',
payload: { id: 2, name: 'Jane', age: 30 }
});在这个例子中，我们有一个包含多个用户的状态对象，以及一个 selectedUser 属性。使用 Immer，我们可以在 reducer 函数中直接修改 draft 对象，而不需要手动创建新的对象和数组。
Immer 的优势
代码简洁性
使用 Immer 可以让我们的代码更加简洁和易于理解。在不使用 Immer 的情况下，我们需要手动进行不可变更新，这会导致代码变得冗长和复杂。而使用 Immer，我们可以直接在 draft 对象上进行修改，就像修改普通对象一样，代码变得更加直观。
减少错误
手动进行不可变更新容易出错，特别是在处理嵌套状态时。我们可能会忘记创建新的对象或数组，从而导致状态更新失败。而使用 Immer，我们可以避免这些错误，因为 Immer 会自动处理不可变更新。
提高开发效率
由于 Immer 让我们可以以可变的方式编写代码，我们可以更快地实现状态更新逻辑。我们不需要花费大量的时间来手动创建新的对象和数组，从而提高了开发效率。
更好的代码可维护性
使用 Immer 编写的代码更加易于维护。当我们需要修改状态更新逻辑时，我们只需要在 draft 对象上进行修改，而不需要担心不可变更新的细节。这使得代码的可读性和可维护性都得到了提高。
总结
总结：Immer 是一个非常强大的库，它让我们可以以可变的方式编写代码，而最终得到的是不可变的数据。在 React 中使用 Immer 可以简化状态更新逻辑，提高代码的简洁性、减少错误、提高开发效率和代码的可维护性。无论是处理简单的状态还是复杂的嵌套状态，Immer 都能帮助我们轻松应对