`useState` 和 `useImmer` 都是 React 中用于管理状态的钩子

useImmer如何使用：

1. 安装：yarn add use-immer
2. 使用：

const [data, updateData] = useImmer({
  fields: [],
});
  
 updateData((draft) => {
  draft.fields.splice(index, 1, {id:1});
 });
1
2
3
4
5
6
7

useState 和 useImmer 都是 React 中用于管理状态的钩子，它们之间的主要区别在于状态的更新方式以及处理可变状态的方式。下面是对比两者的显著优势：

1. 可变状态更新方式：

   • useState： 使用 useState 管理状态时，更新状态需要直接替换原始状态值。例如，setState(newValue) 会直接将 newValue 替换为原始状态值。
   • useImmer： 使用 useImmer 管理状态时，通过 Immer 库提供的 API 来更新状态，这样可以避免直接修改原始状态值，而是返回一个新的状态值。这种方式更安全、更易于维护，避免了直接修改原始状态值可能带来的副作用。

2. 处理复杂状态的能力：

   • useState： 当状态比较简单时，使用 useState 是足够的。但是当状态具有复杂的结构，如嵌套对象或数组时，使用 useState 可能会变得复杂和冗长。
   • useImmer： 使用 useImmer 可以更轻松地处理复杂的状态，因为它允许你在更新状态时直接对状态进行可变操作，而不需要手动进行深层复制或者使用展开操作符等方式来更新状态。

3. 代码简洁性：

   • useState： 在处理简单状态时，使用 useState 可能会更简洁，因为它不需要引入额外的库或者语法。
   • useImmer： 在处理复杂状态时，使用 useImmer 可能会更简洁，因为它提供了更直观和简单的方式来更新状态，避免了手动操作状态的复杂性。

总的来说，如果你的状态比较简单，并且不需要频繁地进行复杂状态更新操作，那么使用 useState 就足够了。但是如果你的状态比较复杂，或者需要频繁进行复杂状态更新操作，那么使用 useImmer 可能会更方便、更安全、更易于维护。

const [curentModal, setCurentModal] = useState({
    count:1
});

useEffect(()=>{
    setCurentModal(s=>{
        s.count+=1;
        return s;
    })
},[]);
console.log(curentModal);

绑定到dom 上：
{curentModal.count}



此时会发现dom的值并没有改变，但是打印时值改变了；


如果：拷贝一下对象：
useEffect(() => {
   setCurentModal(s => {
       return {
           ...s,
           count: s.count + 1
       }
   })
}, []);
此时会发现dom的值会改变；

如果使用useImmer就不用拷贝数，dom就会直接改变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32