如何防止 useEffect 在 React 中的初始渲染上運行？

防止 useEffect Hook 在初始渲染上運行

在 React 中，useEffect Hook 提供了與 componentDidUpdate 生命週期方法類似的功能。但是，與 componentDidUpdate 不同的是，useEffect 在每次渲染（包括初始渲染）之後運行。當我們只想在後續更新後運行該效果時，這可能是一種不必要的行為。

為了防止useEffect 在初始渲染上運行，我們可以利用兩種方法：

使用useRef Hook

useRef Hook 允許我們儲存在渲染之間持續存在的可變值。我們可以用它來追蹤 useEffect 函數是否是第一次被呼叫。

const firstUpdate = useRef(true);
useLayoutEffect(() => {
  if (firstUpdate.current) {
    firstUpdate.current = false;
    return;
  }

  // Run the effect after the initial render
  console.log("useEffect ran after first render");
}, []);

使用 useLayoutEffect Hook

或者，我們可以使用 useLayoutEffect鉤。與 useEffect 不同，useLayoutEffect 在 DOM 更新發生後同步運行，這與 componentDidUpdate 的行為相同。

useLayoutEffect(() => {
  // Run the effect after the initial render
  console.log("useLayoutEffect ran after first render");
}, []);

這些方法有效地阻止 useEffect 在初始渲染上運行，確保效果僅在後續渲染後發生更新，就像 componentDidUpdate 一樣。

以上是如何防止 useEffect 在 React 中的初始渲染上運行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！