immer 和useImmer两个库有啥区别
immer 和 useImmer 是两个紧密相关的库，但它们在用途上有一定的区别：
immer:
immer 是一个 JavaScript 库，专注于提供一种简洁高效的不可变数据管理方式。它利用 Proxy 对象和 WeakMap 实现了所谓的“proxy-based immutability”，允许开发者以直观的可变方式操作数据，而实际上并不会改变原始数据，而是创建一个全新的、经过更新的不可变对象。这样既保证了数据的安全性（避免意外修改原始数据），又大大降低了编写纯函数式代码的复杂度。
import produce from 'immer';
let originalState = { users: [{ id: 1, name: 'Alice' }] };
let nextState = produce(originalState, draft => {
draft.users.push({ id: 2, name: 'Bob' });
});
useImmer:
useImmer 是一个基于 immer 库实现的 React Hook。它专门为 React 应用程序设计，用于简化状态管理中的不可变数据更新。在React中，使用 useState 更新复杂的嵌套状态通常较为繁琐，而 useImmer 提供了一种简便的方式来创建可变代理对象，通过这个代理对象修改状态，React组件的状态就会自动更新，并且始终保持不可变原则。
import React from 'react';
import { useImmer } from 'use-immer';
function UserList() {
const [users, updateUsers] = useImmer([{ id: 1, name: 'Alice' }]);
function addUser(newUser) {
updateUsers(draft => {
draft.push(newUser);
});
}
return (
// 渲染用户列表...
<button onClick={() => addUser({ id: 2, name: 'Bob' })}>Add User</button>
);
}
总结：
immer是底层库，提供了通用的不可变数据更新机制。useImmer是基于immer构建的 React Hook，专为在React组件内部实现状态管理时，以更符合直觉的方式进行不可变数据更新而设计。
那如果在react中直接使用immer该如何书写？
在React中直接使用immer进行状态管理，你可以结合React的useState或useReducerHook来实现。以下是一个使用useState结合immer的基本示例：
import React, { useState } from 'react';
import produce from 'immer';
function ExampleComponent() {
// 初始化状态
const [state, setState] = useState({ users: [{ id: 1, name: 'Alice' }] });
// 使用immer更新状态
function addUser(newUser) {
setState((prevState) =>
produce(prevState, (draft) => {
draft.users.push(newUser);
})
);
}
return (
<div>
{/* 渲染用户列表 */}
{/* 添加用户按钮 */}
<button onClick={() => addUser({ id: 2, name: 'Bob' })}>Add User</button>
</div>
);
}
export default ExampleComponent;
在上述示例中，我们首先导入了immer库的produce函数，然后在组件内部定义了初始状态并使用useState进行管理。
当需要更新状态时，我们不再直接修改状态对象，而是通过produce函数创建一个可变副本（draft），在draft上进行修改。
最后，immer会根据draft的修改情况返回一个新的状态对象，从而实现状态的不可变更新。
当然，如果你的应用程序有更复杂的状态管理需求，也可以结合useReducer Hook 使用immer来处理 reducer 中的状态更新逻辑。