為什麼我的 useEffect Hook 在 React 18 中運行兩次（以及如何修復它）？

為什麼useEffect 運行兩次以及如何在React 中處理它

問題：

使用useEffect 記錄狀態更改時在坐騎上，觀察到該效果被觸發兩次。這個問題在 React 18 中遇到。

原因：

React 18 的 StrictMode 開發模式中，故意重新掛載了一次 useEffect，以確保關鍵組件能夠彈性應對多個安裝和卸載循環。 React 的目標是在這些週期中保留狀態以獲得更好的效能。

解決方案：

建議使用空依賴項，而不是依賴 useEffect 的初始運行數組 ([])僅在第一次渲染後運行效果：

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("rendered", count);
  }, []);

  return <div>...</div>;
};

替代解決方案：

如果對狀態的依賴性至關重要並且必須在每次渲染時進行檢查，請考慮使用以下方法：

• 清理功能： 使用useEffect傳回的清理函數在元件卸載時執行副作用。這可以確保正確的清理並避免記憶體洩漏。
• useRef: useRef 掛鉤可用於儲存可變資料的引用，且其值在渲染之間保持不變。這對於追蹤狀態更改而不觸發多個 useEffect 呼叫非常有用。
• 快取和去抖動：如果效果涉及發出外部請求，請考慮使用快取或去抖動技術來防止重複呼叫。

生產行為：

需要注意的是，此行為僅發生在開發模式下。在生產建置中，useEffect 每次元件掛載只會運行一次。

結論：

理解為什麼 useEffect 在 React 18 中運行兩次對於編寫行為良好且健壯的程式碼至關重要反應程式碼。透過採用上述適當的解決方案，開發人員可以防止錯誤、保持狀態一致性並確保高效的應用程式效能。

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