React：清理函數多久運行一次？

具有狀態變數的 React 元件在這些變數更新時會觸發重新渲染。這是預期的，也是 React 的核心功能之一。此外，組件還提供清理功能，每次「卸載」組件時都會觸發該功能。但這個清理功能實際運作的頻率是多少？

嗯，正如我們將在本演示中探索的那樣，清理函數可以有多個觸發器，但一個常見的觸發器是當狀態變數連結到副作用時更新狀態變數。

簡而言之，如果您的 React 元件正在使用 useEffect 並遵循特定的狀態變量，讓我們看以下範例：

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

每次更新計數器時都會呼叫清理函數。

當狀態變數更新時，React 會重新渲染元件，這表示它首先需要「刪除」它，然後再次「渲染」它。雖然虛擬 DOM 優化了哪些節點需要更新，但在邏輯層面，清理函數仍然會被呼叫。

在大多數情況下，這是可以接受的。但是，如果您的清理函數正在執行報告事件、刪除偵聽器等操作，請確保這是有意為之，因為清理函數將根據狀態變數被多次呼叫。

示範

讓我們看一下示範。

• 在開發者工具中，開啟控制台。
• 你會注意到兩個日誌：

Child mounted
Page mounted

這表示頁面和子元件這兩個元件都已渲染。

• 如果您還記得上面分享的程式碼片段，useEffect 與 counter 綁定在一起，當按一下第一個按鈕時，counter 會遞增。現在，它應該顯示：遞增 0。讓我們繼續單擊它。

• 密切注意控制台並注意如何添加四個日誌：
  

Child unmounted
Page unmounted
Child mounted
Page mounted

狀態變數 counter 已更新，並且由於有兩個 useEffect 掛鉤與 counter 綁定，這表示它們的清理函數已執行。請注意，對於 Page 元件，useEffect 與狀態變數相關聯，而對於 Child 元件，副作用與 prop 變數相關聯，其中來源仍然是相同的計數器狀態變數。

此外，您還可以看到「Flag Off」按鈕，它會更新另一個未連結到 useEffect 的狀態變數。這意味著點擊此按鈕不會觸發清理功能。

結論

清理函數在 React 中被大量使用，尤其是在元件「完成」後報告事情。但是，將 useEffect 綁定到狀態變數時要小心。如演示中所示，這會導致每次更新狀態變數時都會呼叫清理函數，這可能是意想不到的。

大多數時候，清理函數位於 useEffect 中，沒有任何狀態變數。

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

一個元件中可以有多個 useEffect 鉤子。在這種情況下，您可以有一個對狀態變數做出反應，另一個用於設定清理函數。

Child mounted
Page mounted

為了回答這個問題，元件卸載時將會呼叫清理函數。當使用者導航到應用程式的另一個部分時，或者如果 useEffect 依賴狀態變量，那麼每當該狀態變數更新時，就會呼叫 N 次。

以上是React：清理函數多久運行一次？的詳細內容。更多資訊請關注PHP中文網其他相關文章！