為什麼我的 useEffect 在 React 18 的 StrictMode 中運行兩次，如何修復？

useEffect 運行兩次：在React 中有效處理它

為什麼在使用StrictMode 的開發模式下，在React 18 中掛載時useEffect 會被呼叫兩次啟用了嗎？

了解Reason

React 18 在啟動 StrictMode 的情況下，會在初始渲染期間重新安裝元件，以增強效能並協助錯誤偵測。此重新安裝可確保元件能夠多次成功處理安裝和解除安裝。

效果多次運作：這是一個問題嗎？

儘管多次安裝，大多數效果仍能正常運作並卸載。但是，如果某些效果忽略正確清理訂閱或採用單一掛載-卸載生命週期，則可能會遇到問題。

多個呼叫出現問題的典型場景

常見多重效果調用可能導致問題的情況包括：

• HTTP請求： 發出伺服器請求的效果可能會傳送冗餘請求並導致意外行為。
• 基於間隔的效果： 涉及設定間隔的效果可能會在組件卸載後繼續運行，導致記憶體洩漏和意外結果。

處理多個的解決方案調用

React 鼓勵開發人員實現穩健的效果，以優雅地處理多個調用，而不是抑制StrictMode 或使用複雜的解決方法。這涉及實現抵消效果設定操作的清理函數。

清理函數

清理函數通常：

• 停止或撤銷效果操作。
• 防止組件後持續有副作用卸載。
• 中止請求、清除間隔或取消該效果建立的任何訂閱。

範例：處理多個 HTTP 請求

以下是處理多個 HTTP請求的範例useEffect:

useEffect(() => {
  const abortController = new AbortController();

  const fetchUser = async () => {
    try {
      const res = await fetch("/api/user/", {
        signal: abortController.signal,
      });
      // Process the response data
    } catch (error) {
      if (error.name !== "AbortError") {
        // Handle non-aborted errors
      }
    }
  };

  fetchUser();

  return () => abortController.abort();
}, []);

魯棒效果的好處

有效處理多個調用的魯棒效果實：

• 增強效能並防止記憶體洩漏.
• 即使在開發模式下也確保無錯誤行為重新安裝變得顯而易見。
• 與 React 開髮指南保持一致並與未來版本相容。
• 促進更可靠和可維護的程式碼。

以上是為什麼我的 useEffect 在 React 18 的 StrictMode 中運行兩次，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！