返回文章列表
2026/4/22 React, 技術
useEffect:與外部世界互動的橋樑
什麼是 useEffect?
當組件「渲染後」需要執行動作(如:抓取資料、訂閱事件、修改 DOM),就要用 useEffect。
useEffect 讓您在組件「渲染後」執行某些操作。這些操作通常不直接參與畫面繪製,而是與外部世界互動。
核心觀念:
- React 的渲染過程應該是純粹的(輸入什麼資料就畫出什麼畫面)。
- 至於「抓取 API 資料」、「設定計時器」或「手動修改 DOM」,這些會干擾渲染的動作,就必須放在
useEffect裡。
語法拆解
javascript source casejavascript
- 第一個參數:一個函式,定義您要做的動作。
- 第二個參數(相依陣列):
- 不傳(省略):每次渲染後都會執行。
- 空陣列
[]:只在組件「第一次掛載(Mount)」後執行一次(類似初始化)。 - 有值的陣列
[count]:只有當count改變時,才會執行。
實戰範例:模擬資料抓取
「進入頁面時,自動載入使用者資料」
codepen 範例
javascript source casejavascript
常見的使用情境 (Best Practices)
- 資料獲取 (Data Fetching):進入頁面後自動從資料庫抓取資料。
- 訂閱或事件監聽 (Subscriptions):監聽視窗大小調整圖表。
- 手動修改 DOM:使用第三方圖表庫(如 Chart.js)。
- 計時器 (Timers):顯示即時更新的時間。
必知細節:清除機制 (Cleanup)
如果您在 useEffect 裡設定了持續性的動作(如 ),當組件被移除(Unmount)時,必須把它清掉,否則會造成記憶體洩漏。
useEffect 的三種模式
| 模式 | 語法 | 執行時機 |
|---|---|---|
| 每次渲染 | 初次掛載 + 每次更新 | |
| 僅限一次 | 僅初次掛載 (初始化) | |
| 條件觸發 | 初次掛載 + 變數 改變時 |
分享這篇技術心得 / Share
若這份筆記對您有所啟發,歡迎分享給更多同好。
延伸閱讀 / Related Cases
React
useRef:掌握 React 的「儲物櫃」與 DOM 操控
什麼是 useRef? useRef 回傳一個帶有 current 屬性的物件。它有兩個最主要的用途: 1. 存取 DOM 元素:直接抓取網頁上的 HTML 標籤(例如讓輸入框聚焦)。 2. 儲存「不需要渲染」的資料:存放在裡面的資料改變時,不會觸發組件重新渲染。 核心觀念: - 如果您希望
React
React Hook Form:頂尖表單處理實戰
為什麼需要 React Hook Form? 在傳統 React 中處理表單(使用 useState),每當您在輸入框打一個字,整個組件就會重新渲染(Re-render)一次。當表單有 20、30 個欄位時,電腦會開始變慢,程式碼也會變得異常臃腫。 React Hook Form 的核心優勢: -