React 中useImmer的使用

李晨飞_2023-09-12 19:51

useImmer 是一个自定义 React 钩子，它结合了 React 和 immer，用于更轻松地管理状态。它可以帮助你处理不可变状态，同时减少繁琐的状态更新代码。要使用 useImmer 钩子，你需要按照以下步骤进行操作：

安装 use-immer 包：

使用 npm： npm install use-immer
使用 yarn： yarn add use-immer
在你的组件中导入 useImmer 钩子：
javascript 复制代码
```
import useImmer from 'use-immer';
```

在组件中使用 useImmer 钩子来管理状态。它的用法与 React 的 useState 钩子非常相似。通常，你会得到一个状态值和一个用于更新状态的函数。

javascript 复制代码

import React from 'react';
import useImmer from 'use-immer';

function MyComponent() {
  // 使用 useImmer 定义状态
  const [state, setState] = useImmer({
    counter: 0,
    todos: [],
  });

  const handleIncrement = () => {
    setState(draftState => {
      // 在这里修改状态，immer 会处理不可变性
      draftState.counter += 1;
    });
  };

  const handleAddTodo = () => {
    setState(draftState => {
      draftState.todos.push({ text: 'New todo', completed: false });
    });
  };

  return (
    <div>
      <p>Counter: {state.counter}</p>
      <ul>
        {state.todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
}

export default MyComponent;

在上面的代码中，我们使用 useImmer 钩子来定义 state 变量和 setState 函数。在 handleIncrement 和 handleAddTodo 函数中，我们使用 setState 来修改状态，而不需要担心不可变性。immer 会自动处理状态的不可变性。

使用 useImmer 钩子可以使状态管理更加简单和可维护，特别是当你需要频繁修改深层嵌套的状态对象时。它使你能够在更新状态时编写更自然的代码，而不必手动创建新的状态副本。