使用 useMemo、useCallback 和 React.memo 優化 React Render
Photo by Susan Q Yin on 不飛濺
維護有這麼多貢獻者的代碼比我更難，你不同意嗎？這是 2022 年我第一次與在前端站點上有很多開發人員的公司合作，你的同僚有可能做了一些反模式并使應用程式比以前慢。今天我将分享如何優化 React 應用程式，最流行的方法是使用 使用備忘錄 , 使用回調 ， 和 反應。備忘錄。
什麼是 React 中的重新渲染？
在談論 React 性能時，我們需要關注兩個主要階段：
- 初始渲染 — 當元件首次出現在螢幕上時發生
- 重新渲染 — 已經在螢幕上的元件的第二次和任何連續渲染
React 元件什麼時候重新渲染自己？
元件重新渲染自身的原因有四個：
- 狀态變化
- 父（或子）重新渲染
- 語境變化，
- 挂鈎更改
useMemo 與 useCallback
從根本上說，
使用備忘錄
和
使用回調
是用來幫助我們優化重新渲染的工具。他們通過兩種方式做到這一點：
- 減少給定渲染中需要完成的工作量。
- 減少元件需要重新渲染的次數。
簡單解釋：
-
使用備忘錄 傳回一個記憶值。
const memo = useMemo(() => fn, deps)
-
使用回調 傳回一個記憶回調
常量回調 = useCallback(fn, deps)
使用備忘錄
我們的應用程式有兩種狀态，
標明的編号
和
時間
.每秒一次，
時間
變量被更新以反映目前時間，并且該值用于在右上角呈現數字時鐘。
問題來了：無論何時 任何一個 在這些狀态變量發生變化時，我們重新運作所有那些昂貴的素數計算。而且因為
時間
每秒改變一次，這意味着我們不斷地重新生成素數清單，即使使用者選擇的數字沒有改變！
解決方案：您可以将 allPrimes 函數包裝為 ** React.useMemo,** 這将防止每秒鐘調用一次 allPrimes。
使用備忘錄
接受兩個參數：
- 一大塊要執行的工作，封裝在一個函數中
- 依賴項清單
在這種情況下，我們實質上是在說“重新計算素數清單 隻有當
標明的編号
變化”。當元件重新渲染時 其他 原因（例如
時間
狀态變量變化），
使用備忘錄
忽略該函數并傳遞緩存的值。
這通常被稱為 memoization，這就是為什麼這個鈎子被稱為“useMemo”。
使用回調
使用回調
服務于相同的目的
使用備忘錄
，但它是專門為函數而建構的。我們直接給它一個函數，它會記住這個函數，在渲染之間線程化它。
UseMemo
我們不是傳回一個數組，而是傳回一個函數。然後将該函數存儲在
計算
多變的。
這行得通……但有更好的方法：
useCallback
反應備忘錄
或者，您可以使用 React.memo 來防止重新渲染
包裝一個元件
反應備忘錄
将停止在渲染樹上某處觸發的下遊重新渲染鍊，除非該元件的道具已更改。
這被稱為純元件。本質上，我們告訴 React 這個元件總是會産生相同的 輸出 給出相同的 輸入 ，我們可以跳過沒有改變的重新渲染。
這在渲染不依賴于重新渲染源（即狀态、更改的資料）的重元件時很有用。
這非常重要，因為如果您在 1 個檔案中有許多元件并且您隻想渲染 1 個元件， React.memo 就是答案。
獎金提示
在另一個元件的渲染函數中建立元件是 反模式 那可以是 最大的性能殺手 .在每次重新渲染時，React 都會重新挂載這個元件（即銷毀它并從頭開始重新建立它），這将是很多的 比正常的重新渲染慢。
您可以閱讀有關 React 反模式的更多資訊 這裡
如果你喜歡這篇文章，你可能想要 為它鼓掌 因為這對我有很大幫助。謝謝！
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協定，轉載請附上原文出處連結和本聲明
本文連結：https://www.qanswer.top/20730/39370700