学习React-8-useImmer

useImmer

useImmer是基于 immer 库实现的一个 React Hook，它让你可以像修改可变数据一样来修改不可变数据。immer 是一个不可变的数据结构库，完全符合 React 的不可变性原则。

特点

• 可变式写法：你可以像修改可变数据一样编写代码，但实际上是在生成新的不可变数据
• 类型安全：完全支持 TypeScript，提供良好的类型推断
• 性能优化：使用结构共享，只修改变化的部分，其他部分保持引用不变

实现原理

immer 的核心是使用 Proxy 对象来拦截对原始数据的修改操作。当你在 produce 函数中修改数据时，immer 会记录这些修改，然后基于原始数据生成一个新的不可变对象。

使用

因为这并不是React官方的包，所以需要下载 npm install immer use-immer

小栗子

useImmer

import React from 'react';
import { useImmer, useImmerReducer } from 'use-immer';interface User {name: stringage: numberhobby: Array<string>}
interface UseImmerProps {pUser: User;
}const UseImmer: React.FC<UseImmerProps> = (props) => {const [user, updateUser] = useImmer<User>(props.pUser);const handleIncreaseAge = () => {updateUser(draft => {draft.age += 1;});};// 操作对象的值const handleSetName = (name: string) => {updateUser(draft => {draft.name = name;});};// 操作数组的值const handleHobby = (name: string) => {updateUser(draft => {draft.hobby.push(name)})}return (<div><p>User: {user.name}, Age: {user.age}</p>{user.hobby.map((item, index) => {return <p key={`${item}_${index}`}>{item}</p>;})}<button onClick={handleIncreaseAge}>Increase Age</button><button onClick={() => handleSetName('黑子')}>Change name</button><button onClick={() => handleHobby('跳舞')}>add hobby</button></div>);
};export default UseImmer;// App调用
<UseImmer pUser={{name: 'kun', age: 18, hobby: ['唱歌'] }}></UseImmer>

useImmerReducer

interface State {count: number;
}
type Action = | { type: 'INCREMENT' }| { type: 'DECREMENT' }const initState = {count: 0
}
const counterReducer = (state: State, action: Action) => {switch (action.type) {case 'INCREMENT':state.count += 1;break;case 'DECREMENT':state.count -= 1;break;}
}
const UseImmer: React.FC<UseImmerProps> = (props) => {const [state, dispatch] = useImmerReducer(counterReducer, initState)return (<div><button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button></div>);
};export default UseImmer;

useState和useImmer对比

代码对比

useState —— 更新深层字段：

setState(prev => ({...prev,user: {...prev.user,address: {...prev.user.address,city: 'Shanghai'}}
}));

useImmer —— 同一段逻辑：

updateState(draft => {draft.user.address.city = 'Shanghai';
});