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