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

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

useEffect hook 是管理 React 元件中副作用的一個有價值的工具。但是，預設情況下，它會在每次渲染後運行，包括第一次渲染。這可能會導致不必要的行為，如範例程式碼所示。為了克服這個問題，有兩種有效的策略。

1。使用 useRef Hook 來追蹤初始渲染

useRef Hook 允許我們儲存在重新渲染期間持續存在的可變值。透過利用這一點，我們可以追蹤 useEffect 函數是否是第一次執行。

範例：

const { useState, useRef, useEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

  return (
    <div>
      <p>useEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

2.利用useLayoutEffect Hook

引入LayoutEffect Hook

引入LayoutEffect Hook

const { useState, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

  return (
    <div>
      <p>useLayoutEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

引入LayoutEponect Hopatecom行為。它在瀏覽器繪製之前運行，防止任何視覺故障。 範例：

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