useCallback狀態不更新的解決方法
狀態不更新的原因
在使用useCallback的時候，偶爾會遇到deps已經更新了，但是呼叫執行useCallback定義的函式時，內部的deps狀態還是舊的，大部分情況是因為呼叫的useCallback函式是舊的，而不是deps更新后新生成的useCallback;
下面是一個示例：
點擊按鈕，useCallback執行列印的值永遠是初始值0，這是因為沒有將getLatestCount加入到onClick的deps中，導致每次執行onClick，執行的getLatestCount都是初始的函式，因此獲取到的count總是0；
解決方法
將useCallback函式加入deps
如下圖所示意，將getLatestCount加入onClick的依賴中，這樣每次執行onClick的時候，用的都是最新的getLatestCount函式,列印的count是最新的值
這里有一點要注意，一旦我們使用了useCallback，并且每次都要獲取deps最新的狀態的話，我們就需要在所有呼叫useCallback函式的地方，將定義的useCallback加入依賴中，這樣才能保證每次useCallback函式拿到的deps的值都是最新的值，
使用useRef保存狀態的參考
我們可以將useCallback函式中使用的狀態資料包裹在useRef中，保留其參考，這樣不論狀態如何改變，總能通過useRef的參考獲取到最新的狀態，
代碼如下：
結語
useCallback將函式包裹起來，可以達到當依賴的deps不改變的情況下，回傳的函式參考依然不變，避免重新構造一次函式，但是若要保持每次使用的useCallback中的狀態是最新的，那么就需要在使用useCallback的地方，將useCallback加入到deps中，
所以，筆者建議，若是沒有非常大的性能消耗的話，盡量不要使用useCallback，而是直接定義裸的函式，如下圖所示：
相關資料
- React useCallback原始碼:https://github.com/facebook/react/blob/0e100ed00fb52cfd107db1d1081ef18fe4b9167f/packages/react-server/src/ReactFizzHooks.js#L445
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/282670.html
標籤：區塊鏈
上一篇：架構基礎：流媒體系統架構入門理解