為什麼我的 useEffect Hook 在 React 18 開發模式下觸發兩次？

React 18 中useEffect 多次觸發：原因及解決方法

在React 18 的開發環境中，有時會調用初始組件安裝時兩次。這種行為源自於 React 為未來 UI 狀態保存功能所做的準備。

雙重呼叫的原因：

React 預計會出現需要重新掛載樹同時保留其狀態的情況以獲得無縫的用戶體驗。例如，當切換標籤並返回頁面時，React 的目標是像以前一樣顯示精確的螢幕。為了實現這一點，它透過在初始化期間卸載和重新安裝元件來測試元件的彈性。

開發與生產行為：

需要注意的是，這種雙重呼叫僅發生處於開發模式。在生產環境中，useEffect 的行為符合預期，每次掛載只呼叫一次。

處理問題：

雖然兩次調用可能看起來不尋常，但它提供了一個機會提高程式碼品質並使其與未來的React 版本保持一致。通常，useEffect 應該能夠適應多次呼叫並正確清理，以防止記憶體洩漏。

範例：useEffect 內部的間隔：

考慮一個在其中設定間隔的範例使用效果。為了防止嚴格模式下的潛在問題，清理函數應在組件卸載後明確終止間隔。

useEffect(() => {
  const id = setInterval(() => setCount((prevCount) => prevCount + 1), 1000);
  return () => clearInterval(id);
}, []);

替代方法（不建議）：

一些可能建議在 useEffect 中使用 useRef 和條件語句來將其執行限制為一次。然而，React 明確地不鼓勵這種做法，而是強調實現清理函數的重要性。

useEffect 內部的 API 呼叫：

如果 useEffect 包含 API 調用，請考慮使用 fetch使用 AbortController。控制器允許在元件卸載時中止不再相關的請求。這可以防止未安裝組件的狀態更新並提高效能。

結論：

理解 React 18 中雙重調用 useEffect 背後的原因並採用適當的處理技術可以導致更健壯且無錯誤的程式碼。無論其在開發模式中的臨時性質如何，它都是增強組件彈性並確保未來 React 版本中無縫操作的絕佳機會。

以上是為什麼我的 useEffect Hook 在 React 18 開發模式下觸發兩次？的詳細內容。更多資訊請關注PHP中文網其他相關文章！