immer 和useImmer两个库有啥区别

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 中的状态更新逻辑。