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

useImmer如何使���：

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

const [data, updateData] = useImmer({  fields: [],});   updateData((draft) => {  draft.fields.splice(index, 1, {id:1}); });

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

1. 可变状态更新方式：

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

   • 处理复杂状态的能力：

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

     • 代码简洁性：

       • 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就会直接改变