React 中useImmer的使用

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

1. 安装 use-immer 包：

   使用 npm：  npm install use-immer   

   使用 yarn： yarn add use-immer

2. 在你的组件中导入 useImmer 钩子：

   import useImmer from 'use-immer';
   

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

   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}>Incrementbutton>
         <button onClick={handleAddTodo}>Add Todobutton>
       div>
     );
   }
    
   export default MyComponent;
   

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

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