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 來更新狀態，這樣可以避免直接修改原始狀態值，而是返回一個新的狀態值。這種方式更安全、更易于維護，避免了直接修改原始狀態值可能帶來的副作用。

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 上：<div>{curentModal.count}</div>此時會發現dom的值并沒有改變，但是打印時值改變了；如果：拷貝一下對象：
useEffect(() => {setCurentModal(s => {return {...s,count: s.count + 1}})
}, []);
此時會發現dom的值會改變；如果使用useImmer就不用拷貝數，dom就會直接改變