為什麼我的 useEffect Hook 在 React 18 開發模式下元件掛載時觸發兩次？

useEffect 在組件掛載時觸發兩次

問題：

當將包含狀態的依賴項數組一起使用時，在React 18開發中，效果函數在初始安裝時被調用兩次

說明：

React 18 引入了一個支援重新掛載具有相同狀態的組件的功能，此功能可提供更好的開箱即用效能，但需要組件來處理多次安裝和銷毀效果。

為了暴露潛在的問題，React 在開發模式下會自動卸載並重新安裝每個元件一次。此重新掛載會第二次觸發 useEffect 函數。

解：

此行為旨在發現效果邏輯中現有的錯誤。正確的方法是調整效果實現以正確處理多個安裝。

建議：

1.使用清理函數：

實現useEffect 清理函數以在組件卸載時取消元件或撤消效果的操作。這確保了效果對組件狀態和副作用的影響在生產和開發模式之間保持一致。

2.快取 HTTP 請求：

採用重複資料刪除和快取 HTTP 請求的技術來最佳化效能並避免冗餘的網路操作。考慮使用實作快取機制的資料取得庫或鉤子。

3.檢查您的useEffect 用法：

確保正確使用useEffect，而不是用於初始化應用程式狀態或執行不應在重新掛載時重複的操作。請參閱「不是效果」原則作為指導：

• 不是效果：初始化應用程式
• 不是效果：購買產品

其他注意事項：

• 此行為僅發生在發展模式。在生產中，useEffect 只會被呼叫一次。
• 不鼓勵嘗試使用 useRef 和 useEffect 中的 if 語句或刪除 StrictMode 來解決重新掛載行為。
• 閱讀有關 useEffect 的詳細 React 文件可以提供有關該主題的進一步見解。

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