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

使React 的useEffect Hook 避免初始渲染執行

基於類別的React 元件中的componentDidUpdate() 渲染生命週期方法後都會被調用，除了最初的。要使用 useEffect 掛鉤模擬此行為，該掛鉤可能會在每次渲染上運行，包括第一次。

解決方案

阻止 useEffect 運行在初始渲染時，利用 useRef 鉤子可以幫助追蹤是否是效果的初始調用。

此外，要模仿在「佈局效果」階段運行的 componentDidUpdate 的行為，請考慮使用 useLayoutEffect 而不是 useEffect。

範例

const { useState, useRef, useLayoutEffect } = React;

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

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

    console.log("componentDidUpdateFunction");
  });

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

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

此方法採用useRef 鉤子追蹤第一次更新並確保效果僅在後續更新期間執行，鏡像基於類別中的componentDidUpdate 的行為組件。

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