React学习———Immer 和 use-immer

Immer

Immer是一个用于管理不可变数据的JavaScript库，核心作用是让你用“可变”的写法来安全的操作不可变对象或数组，极大简化了复杂数据结构的更新逻辑。避免了手动深拷贝或扩展运算符的繁琐操作

核心原理

Immer的核心机制基于“草稿状态(Draft State)”和Proxy对象

• 草稿状态：用户在一个函数内直接修改草稿对象，Immer会记录所有变更
• 不可变转换：Immer会根据草稿状态生成一个新的不可变对象，原始数据保持不变
• Proxy支持：现代浏览器中使用Proxy追踪修改；旧环境（如IE）降级到ES5的Object.defineProperty

使用场景

React 状态管理：简化useState或useReducer的复杂状态更新

import produce from 'immer'
const [user, setUser] = useState({name: '张三', info: { age: 18 }})const changeAge = () => {setState(produce(draft) => {draft.info.age  = 20})
}

import produce from 'immer'
import { useReducer } from 'react'
function reducer(state, action){return produce(state, draft => {switch(action.type){case 'add':draft.list.push(action.payload)break;case 'update':draft.user.name = action.payloadbreak;// ....}})
}
const [state, dispatch] = useReducer(reducer, { list: [], user: { name: '' } })

Redux Reducers：

在Redux中，reducer函数需要返回一个新的状态对象。使用Immer可以避免手动编写复杂的不可变更新逻辑；Redux Toolkit（RTK）内置了Immer，createSlice里的reducer可以直接用“可变写法”

import produce from 'immer'
const initialState = {list: [],user: { name: '', age: 0 }
}
function reducer(state = initialState, action){return produce(state, draft => {switch(action.type){case 'ADD_ITEM':draft.list.push(action.payload)break;case 'SET_USER_NAME':draft.user.name = action.payloadbreak// ....}})
}

复杂数据结构的更新：处理嵌套对象或数组

const state = {user: {name: 'Alice',address: {city: 'Wonderland',zip: '123'}}
}const nextState = produce(state, draft => {draft.user.address,city = 'Newland'
})

性能优化

Immer通过结构共享来优化性能，它只会复制被修改的部分数据，而未修改的部分会直接引用原始数据。这种方式在大型数据集上可以显著减少内存占用和计算开销

use-immer

use-immer是一个基于Immer的React Hook，用于简化React组件中复杂状态（如嵌套对象、数组等）的不可变更新。它结合了Immer的不可变更新能力和React的useState，允许开发者以“可变”语法更新状态，同时自动生成新的不可变状态

使用场景

• 需要频繁操作数组、对象、嵌套结构（如表单、树形数据、列表等）
• 需要保证状态状态不可变（如Redux、React状态），但又想写法简单
• 需要避免手动深拷贝、展开对象的繁琐和易错

使用方法

• 安装：npm install immer use-immer
• 基本示例

import React from 'react'
import { useImmer } from 'use-immer'
function App(){// 类似 useState ,但返回的 update 函数 支持 Immer 的草稿更新const [user, updateUser] = useImmer({name: 'Alice',profile: { age: 28, hobbies: [ 'coding', 'music' ] }})const handleAgeIncrease = () => {updateUser((draft) => {draft.profile.age += 1})}const addHobby = () => {updateUser((draft) => {draft.profile.hobbies.push('reading')})}return (<div><p>Name: {user.name}, Age: {user.profile.age}</p><button onClick={handleAgeIncrease}>Increase Age</button><button onClick={addHobby}>Add Hobby</button></div>)
}

进阶用法

• 与Immer的produce结合

// 当需要复用状态更新逻辑时，可分离出纯函数
const updateProfile = produce(draft => {draft.profile.age += 1;
})// 在组件使用
updateUser(updateProfile)

• 处理数组：直接使用数组方法（无需创建新数组）

const [ todos, updateTodos ] = useImmer([{ id: 1, text: 'Learn React', done: false }
])// 添加任务
updateTodos((draft) => {draft.push( { id: 2, text: 'Learn Immer', done: false } )
})// 标记完成
updateTodos((draft) => {const todo = draft.find(item => item.id === 1)if(todo) todo.done = true
})

• TypeScript支持：提供完整的类型推断，无需额外定义类型

interface User{name: string,profile: {age: number,hobbies: string[]}
}const [ user, updateUser ] = useImmer<User>({name: 'KDD',profile: { age: 19, hobbies: [] }
})

• 结合UseContext

import React, { createContext, useContext } from 'react'
import { useImmer } from 'use-immer'
const StateContext = createContext()
function App(){const [ state, updateState] = useImmer({theme: 'light',user: {name: 'Alice',age: 25}})return (<StateContext.Provider value={{state, updateState}}><ChildComponent /></StateContext.Provider>)
}function ChildComponent(){const {state, updateState} = useContext(StateContext)const toggleTheme = () => {updateState(draft => {draft.theme = draft.theme === 'light' ? 'dark' : 'light'})}return (<div><p>Current Theme: { state.theme }</p><button onClick={toggleTheme}>Toggle Theme</button></div>)
}

use-immer和useState的区别

状态管理的方式

• useState：是React提供的一个基础Hook，用于在函数组件中管理状态，它返回一个状态值和一个更新该状态的函数。每次状态更新时，组件会重新渲染
• use-immer：是基于immer库的Hook，允许以更直接的方式更新状态。Immer通过使用不可变数据结构，使得可以直接修改状态的副本，而不需要手动创建新的状态对象。

更新状态的语法

• useState：

const [state, setState] = useState({count: 1})setState({count: state.count + 1})

• use-immer

const [state, updateState] = useImmer({ count: 0 });updateState(draft => {draft.count += 1
})

复杂状态的处理

• useState：

const [state, setState] = useState({ user: { name: 'John', age: 30 } });
setState(prevState => {...prevState,user: {...prevState.user,age: prevState.user.age + 1}
})

• use-immer

const [state, updateState] = useImmer({ user: { name: 'John', age: 30 } });updateState(draft => {draft.user.age += 1
})

性能考虑

• useState在每次状态更新时都会触发组件的重新渲染，适用于简单的状态管理场景
• use-immer由于使用了 immer 的不可变数据结构，可能会在复杂状态更新时带来额外的性能开销，但在处理复杂状态时提供了更好的开发体验。

适用场景

• useState 适用于简单的状态管理，尤其是当状态结构较为扁平时
• use-immer 更适合处理复杂的状态对象或嵌套结构，尤其是在需要频繁更新深层属性时，能够显著减少代码复杂度。