React 生命週期（以分鐘為單位）

掌握 React 生命週期是像專業人士一樣調試的第一步？ .

這是一個簡單的3 分鐘指南，幫助您了解一切是如何運作的。

？下載我的免費 101 React Tips And Tricks Book，搶佔先機。

React 元件生命週期是什麼？

React 元件就像一個人？ .

就像我們的誕生、進化和最終消亡一樣，React 組件也遵循生命週期：它們誕生，更新，然後消亡.

這個過程稱為組件生命週期，它分為三個主要階段：

• 安裝（又稱誕生）：React 建立元件並將其新增至 DOM。

• 更新（又稱演化）：組件會根據狀態變化而變化。

• 卸載（又稱死亡）：React 刪除元件並清理資源。

每個階段都包含 React 執行的特定步驟，以最佳化渲染和管理資源。

React 組件生命週期與人類生命週期的類比

為什麼需要了解 React 元件生命週期？

了解 React 生命週期可以幫助您：

• 使用 useEffect 和 useLayoutEffect 來寫出更好的效果。

• 避免效率低下，例如在 useEffect 中設定狀態。

• 透過清理來防止記憶體洩漏。

• 最佳化效能並避免不必要的重新渲染。

React 元件生命週期的三個階段

有 Hook 的 React 元件的時間軸。來源：https://julesblom.com/writing/react-hook-component-timeline

1. 掛載：首次渲染元件時

當 React 將元件新增（掛載）到螢幕時，就會發生掛載。

什麼觸發安裝？

• 當你呼叫 root.render()

• 當 React 將元件新增至 JSX 樹並重新渲染其父元件以包含新元件。

安裝過程中會發生什麼事？

1. Render： React 呼叫元件函數（或類別元件中的 render 方法）來建立 React 元素。 React 也會初始化鉤子。

2. 插入 DOM 節點： React 使用新元素更新真實 DOM。此步驟發生在 提交階段，此時 React 將變更套用至 DOM。

3. 設定 DOM 參考： 如果您使用 useRef，React 會設定 DOM 節點的參考。

4. 運行 useLayoutEffect: React 運行 useLayoutEffect 函數。此處所做的更改不會導致可見的閃爍，因為更改將在使用者看到任何視覺變化（在繪畫期間發生）之前發生。

5. DOM 繪製： 瀏覽器繪製更新後的 UI。

6. 運行 useEffect: 最後，React 運行 useEffect 函數。

---

2. 更新：當元件重新渲染時

當 React 重新渲染元件以反映變更時，就會發生更新。

什麼觸發更新？

• 狀態更新

• 更新的上下文值

• 父元件重新渲染（如果組件未記憶）

• 等等

更新期間會發生什麼事？

1. 重新渲染： React 重新計算元件的輸出。

2. 協調： React 將新的 React 樹與前一個 React 樹進行比較以確定更改。

3. 提交更改： React 使用變更更新 DOM。

4. 取消設定DOM 引用：如果在更新期間引用的DOM 節點被刪除或替換，React 會使ref.current 無效，並使用null 呼叫不穩定 ref 回調。

5. 清理 useLayoutEffect: React 運行之前 useLayoutEffect 中的清理函數。

6. 設定 DOM 引用： React 為更新的 DOM 元素設定新的參考值（就像在安裝階段一樣）。

7. 運行 useLayoutEffect: React 呼叫 useLayoutEffect 鉤子，就像在掛載階段一樣（如果它的依賴項已根據 Object.is 發生變化）。

8. 繪製 DOM： 瀏覽器更新 UI 以反映變更。

9. 清理 useEffect： 清理先前執行的 useEffect 中的函數以防止記憶體洩漏。

10. 執行 useEffect： React 運行更新後的 useEffect 函數（如果其依賴項已根據 Object.is 發生更改）。

    ---

3. 卸載：當 React 刪除一個元件時

當 React 從 DOM 中刪除元件並釋放資源時，就會發生卸載。

什麼觸發卸載？

• 此組件不再是 JSX 樹的一部分

• React 卸載其父級。

• 元件的鍵已變更（React 將卸載舊實例並掛載新實例。）。

• 等等

卸載過程中會發生什麼事？

• 運行清理函數： React 運行 useEffect 和 useLayoutEffect 中定義的清理函數。

• 取消設定 DOM 引用： React 使 ref.current 無效，並使用 null 呼叫 ref 回呼。

• 刪除 DOM 節點： React 刪除與該元素關聯的 DOM 節點。

進一步發展的其他資源

如果您想深入了解 React 生命週期，我推薦這些精彩的資源：

• React 文件

  • 渲染並提交
  • 反應效果的生命週期

• 有 Hooks 的 React 組件的時間軸 ❤️

• 為什麼 React 會重新渲染

• React 渲染行為（大部分）完整指南 - 警告：這是一篇很長的文章？

概括

一旦您了解了 React 元件生命週期，您將領先 99% 的初級前端開發人員。

比你想像的簡單：只有三個階段 - 安裝、更新和卸載。

開始用現實世界的例子練習這些概念：

• 使用 useLayoutEffect 進行 DOM 測量。

• 組件卸載時始終清理效果。

你有這個嗎？ .

？發現錯誤

？值得深思的

這是一個包裝？ .

發表評論？分享你最大的收穫。

別忘了加上「???」。 如果您正在學習 React，請

免費

下載我的 101 React Tips & Tricks 書。 如果您喜歡這樣的文章，請加入我的免費時事通訊，

FrontendJoy

。

如果您想要每日提示，請在 X/Twitter 或 Bluesky 上找到我。 <script> // Detect dark theme var iframe = document.getElementById('tweet-1872251057281372270-743'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872251057281372270&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1872190627729084724-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872190627729084724&theme=dark" } </script>

以上是React 生命週期（以分鐘為單位）的詳細內容。更多資訊請關注PHP中文網其他相關文章！