首頁 >web前端 >js教程 >如何防止 React useEffect Hook 在初始渲染上運行?

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

DDD
DDD原創
2024-11-24 15:18:11621瀏覽

How to Prevent the React useEffect Hook from Running on Initial Render?

防止 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn