[React Hook] useState

React 社區似乎很喜歡在函式名前加上 use

例如 useServer、useCallback、useState、useMemo 等

客製化 Hook 也都以 use 開頭

這是從哪裡開始的呢？

useState 是一個知名的 Hook。

它用於儲存狀態值，並且在狀態值發生變化時重新渲染元件。非常簡單。

這是大家都知道的範例。

既然狀態值改變就會重新渲染，那麼重新渲染的範圍是哪一部分呢？

只有 p 標籤嗎？還是包含 button 標籤？

答案是呼叫 useState 的元件整體。

雖然會重新渲染 ExampleComponent，

但它會利用虛擬 DOM 來比較值，並僅更新需要修改的 DOM 部分。

useState 在每次重新渲染時都會被呼叫，那麼狀態值是如何保持的呢？

答案來自 useState 的結構。

以上程式碼是 React useState 的實際程式碼。

它從全域物件中取得 dispatcher，並呼叫 useState。

僅憑此程式碼無法理解其結構。

深入探究後，可以找到以下程式碼。

它取得 hook 並將 set 函式直接繫結到 hook 中的 queue。

(bind 用於將 this 繫結到現有函式，並將其餘參數作為該函式的參數，然後返回一個繫結了 this 的新函式)

但僅憑此程式碼仍然難以理解原因。

讓我們繼續深入探究。

可以觀察到它會在每次呼叫時都分配初始值。這樣一來，狀態值的保持就無法解釋了。

讓我們繼續深入探究。hook 看起來有些可疑。

currentlyRenderingFiber 和 workInProgressHook 是全域變數。

它利用從右到左的分配方式來實現連結串列。

因此，預計 Hook 的結構如下所示。

可以觀察到值會不斷地新增到最前面。

然而，仍然無法解釋清楚。在查看了其他 useState 實作後，

發現並非所有情況下都會呼叫 mountState，在重新渲染時會呼叫 updateState 和 rerenderState。

因此，結構如上所述，並根據事件呼叫不同的函式。

如果您想直接查看程式碼，可以參考 react/packages/react-reconciler/src/ReactFiberHooks.js。