React 系列：useState 與 useRef

當你開始使用時，useState 及其所有怪癖可能已經足夠令人難以承受。現在將 useRef 加入其中，您的大腦就會爆炸。

我認為更深入了解 useRef 與 useState 的技術細節會很有幫助，因為工程師通常很難理解它們之間的差異以及何時選擇其中一個。

以下是我對每個內容的定義，粗略且明顯過於簡化：

useState 是一個鉤子，可讓您存取和更新值，從而觸發重新渲染。

useRef 是一個鉤子，可讓您引用渲染不需要的值。

您可能會問自己，為什麼了解這些內容帶來的好處很重要？好吧，您可能會想要將 useState 應用於所有內容，僅僅因為它確實有效。

是的，但是，您的應用程式變得越複雜，元件將狀態屬性向下傳遞5 個級別，並在此過程中觸發一堆不必要的更新，您可能會更快開始遇到效能問題比你想像的還要多。

許多開發人員的另一個誤解是認為 useRef 只能操作和存取 DOM 元素，這很遺憾，因為你們都錯過了 useRef 可以做的其他 99 件事。

讓我們從 useState 開始吧！現在請豎起耳朵，我親愛的開發者 ʕ◉ᴥ◉ʔ

✨ useState

useState 是一種強大但簡單的方法，可以在變數值發生變化時更新視圖，它使最新值與螢幕同步，而無需我們手動執行任何操作。宣告語法如下 const [memesILiked, setMemesILiked] = useState(9000).

現在，讓我們討論一下當您使用 useState 執行操作時會發生什麼。

更新狀態值會觸發重新渲染，正如您可能想像的那樣，重新渲染視圖對於瀏覽器來說是一個非常昂貴的操作。以下是 React 和瀏覽器如何結合運作以確保您的應用程式得到更新：

1. 事件觸發器：事件觸發狀態更新。點擊、計時器或其他任何東西。
2. 狀態更新：呼叫setState並安排元件更新，元件被標記為「髒」（需要重新渲染）。
3. 協調階段：React 開始新虛擬 DOM 與舊虛擬 DOM 之間的協調。它遞歸地重新渲染元件及其所有子元件。
4. 檢查差異：React 將新的虛擬 DOM 樹與先前的虛擬 DOM 樹進行比較。變更儲存在要套用於真實 DOM 的更新清單中。
5. 渲染階段：使用新狀態呼叫渲染方法或函數元件。
6. 提交階段：React 將 diff 過程中的變更套用到真實 DOM。
7. 更新 DOM：更新真實的 DOM 以反映新狀態。瀏覽器重新繪製 DOM，在視覺上更新 UI。
8. 渲染後效果：呼叫元件重新渲染後計畫運行的任何效果。這包括使用渲染期間更改的依賴項註冊的 useEffect 掛鉤。

唷，有很多東西...雖然上述過程確保您的 UI 與應用程式狀態保持同步，但它也強調了為什麼過多或不必要的重新渲染會導致效能問題。幸運的是，React 提供了多種策略和工具來幫助最佳化此流程，例如 useMemo 和 useCallback，但這超出了本文的範圍！

總而言之，useState 是一個非常方便的鉤子，如果使用得當，它可以為使用者提供良好的體驗。以主題切換為例。借助 useState，您可以輕鬆地在淺色和深色模式之間切換，讓您的用戶立即滿意地看到應用程式根據他們的喜好進行轉換。

✨ useRef

現在，我們來談談 useRef。雖然 useState 的作用是在狀態變更時觸發重新渲染，但 useRef 就像一個安靜的觀察者，永遠不想引起人們的注意。它非常適合儲存可變值，這些值變更時不需要重新渲染。語法看起來像 const memeRef = useRef(null).

useRef 最常用於直接存取 DOM 元素。例如，如果您需要以程式方式聚焦輸入字段，則 useRef 可以儲存對該元素的參考。但 useRef 的功能不僅限於 DOM 存取。它還可以儲存任何可變值！我的朋友們，這就是魔法發生的地方？ ？ ？ （無論如何，我認為）。

可以這樣想：useRef 是一種在渲染之間持久保存值而不觸發重新渲染的方法。這使得它非常適合儲存計時器、計數器甚至組件的先前狀態等資料。與 useState 不同，更新 ref 不會通知 React 重新渲染您的元件。它只是靜靜地更新價值並繼續其業務。

這是一個實際範例：假設您想要實作一個簡單的計數器，但您不希望每次增加計數器時 UI 都會更新。您可以使用 useRef 來儲存計數器值。計數器會如預期增加，但由於元件不關心此引用值以進行渲染，因此不會發生重新渲染。

useRef 在保留狀態的最新值而不引起額外渲染方面也很有用。例如，如果您使用 interval 來更新值，但您不希望該值每毫秒觸發一次重新渲染，則 useRef 是您的首選工具。它允許值在後台更改，保持 UI 響應並避免不必要的重新渲染。

總而言之，useRef 最適合用於：

• 存取 DOM 元素：經典用例，例如聚焦輸入欄位。
• 儲存可變值：不需要重新渲染，例如計時器或先前的值。
• 跨渲染保持值：不會導致重新渲染，保持 UI 流暢且有效率。

現在您希望了解其中的差異（如果我正確地履行了我的職責²），讓我們深入研究一些不那麼常見的用例。我將更多地關注 useRef ，因為我覺得它是這裡的無名英雄。

1. 追蹤組件安裝狀態：useRef 可用於追蹤組件是否已安裝或卸載，這對於避免卸載後狀態更新很有用。

2. 儲存靜態值：對於儲存在渲染之間不會變更的靜態值（例如常數或快取值），useRef 比 useState 更有效。

3. 防止重新初始化：如果你想阻止一段程式碼重新執行每個渲染（例如，初始化 WebSocket 連線）。

4. 儲存先前的回呼：如果需要保留先前回呼函數的引用，useRef 可以儲存先前的函數引用，而不會影響組件的渲染週期。

5. 引用計時器ID：使用計時器（如setTimeout 或setInterval）時，將計時器ID 儲存在useRef 中，以避免每次設定或清除計時器時觸發重新渲染。

6. 觸發動畫：為了強制觸發動畫（如 CSS 過渡或滾動動畫），useRef 可用於直接與 DOM 元素交互，而不會導致重新渲染。

✨ 結論

雖然 useState 對於管理和回應應觸發重新渲染的狀態變更至關重要​​，但 useRef 是一個沉默的伙伴，可協助您在不中斷 UI 的情況下管理狀態。

了解何時使用每種方法可以幫助您避免潛在的效能問題，並使您的 React 應用程式更加高效和可維護！

感謝您的閱讀，如果您成功了，請舉起爪子，擊掌五！ ⊹⋛⋋( ?????)⋌⋚⊹

註腳：
1 顯然是誇張了。
² 我有點戲劇化，以防你看不出來。

以上是React 系列：useState 與 useRef的詳細內容。更多資訊請關注PHP中文網其他相關文章！