当前位置：首页 > news >正文

React 中使用immer修改state摆脱“不可变”

news 2025/7/22 10:26:47

什么是 Immer

Immer 是一个小型的 JavaScript 库，它让你可以以可变的方式来编写代码，而最终得到的是不可变的数据。想象一下，你可以直接拿起积木修改积木塔，而最后呈现给 React 的是一个全新搭建好的积木塔。这就是 Immer 为我们做的事情。它使用了 Proxy（在现代 JavaScript 环境中）或 ES5 的 Object.defineProperty 来实现这一魔法。

为什么 React 需要不可变状态

在深入了解 Immer 之前，我们先搞清楚为什么 React 要求我们不可变地更新状态。在 React 中，当状态发生变化时，React 会通过比较新旧状态来决定是否重新渲染组件。如果我们直接修改状态，React 可能无法检测到状态的变化，从而导致组件不会重新渲染。而不可变更新会创建一个新的状态对象，React 可以很容易地检测到这个变化并正确地重新渲染组件。

不使用不可变更新的问题示例

下面是一个简单的 React 组件示例，展示了不使用不可变更新可能会遇到的问题：

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 能够正确检测到状态变化，我们需要使用不可变更新。以下是使用不可变更新的示例：

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 来安装：

npm install immer
# 或者
yarn add immer

Immer 的基本使用方法

创建一个 draft

Immer 的核心概念是 draft（草稿）。当你使用 Immer 时，它会给你一个可以直接修改的 draft 对象，而不是原始的状态对象。在你完成对 draft 的修改后，Immer 会基于这些修改创建一个新的不可变状态对象。

下面是一个使用 Immer 的简单示例：


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，我们可以像处理普通对象一样轻松地修改嵌套状态。

数组对象示例

下面是一个处理嵌套对象状态的示例：

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) => {//使用immerconst newList = produce((draft) => {return draft.filter(item => item.id != id);});setList(newList);//不可变更新//  const list1 = list.filter(item=>item.id !=id)// setList(list1);};const addEdit = () => {//使用immerconst 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>&nbsp; &nbsp;{isPublished ? (<span style={{ color: "green" }}>已发布</span>) : (<span>未发布</span>)}&nbsp; &nbsp;<button onClick={() => deleteEdit(id)}>删除问卷</button></div>);})}</div></>);
};
export default List;

在这个例子中，我们有一个嵌套的数组 state，包含多个对象使用 Immer，我们可以直接在 draft 对象上修改嵌套数组中的元素，而不需要手动创建新的数组和对象。

在 Redux 中使用 Immer

Immer 也可以和 Redux 一起使用，让 Redux 的 reducer 函数更加简洁和易于维护。在 Redux 中，reducer 函数必须返回一个新的状态对象，而不能直接修改原始状态。使用 Immer，我们可以在 reducer 函数中以可变的方式编写代码。

Redux 示例

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 对象，而不需要手动创建新的对象和数组。