使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中文網其他相關文章！
