使React useEffect挂钩在初始渲染时不运行

作者

根据文件：

componentDidUpdate（）在更新发生后立即调用。初始渲染时不调用此方法

我们可以使用新的useffect（）钩子来模拟componentdiddupdate（），但是每次渲染后，甚至第一次渲染后都会运行useffect（）。如何使其不在初始渲染时运行

正如您在下面的示例中所看到的，componentDidUpdateFunction在初始渲染期间打印，但在初始渲染期间未打印componentDidUpdateClass

函数组件didUpdateFunction（）{
const[count，setCount]=React.useState（0）；
React.useffect（（）=&gt{
log（“componentDidUpdateFunction”）；
});
返回(
&lt；div&gt；
&lt；p&gt；componentDidUpdateFunction:{count}次&lt；/p&gt；
&lt；按钮
onClick={（）=&gt{
设置计数（计数+1）；
}}
&燃气轮机；
点击我
&lt；/button&gt；
&lt；/div&gt；
);
}
类ComponentDidUpdateClass扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0，
};
}
componentDidUpdate（）{
log（“componentDidUpdateClass”）；
}
render（）{
返回(
&lt；div&gt；
&lt；p&gt；componentDidUpdateClass:{this.state.count}次&lt；/p&gt；
&lt；按钮
onClick={（）=&gt{
this.setState（{count:this.state.count+1}）；
}}
&燃气轮机；
点击我
&lt；/button&gt；
&lt；/div&gt；
);
}
}
ReactDOM.render(
&lt；div&gt；
&lt；ComponentDidUpdateFunction/&gt；
&lt；ComponentDidUpdateClass/&gt；
&lt；/div&gt；，
文档查询选择器（“app”）
);
&lt；脚本src=”https://unpkg.com/[email protected]/umd/react.development.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://unpkg.com/[email protected]/umd/react dom.development.js“&gt&lt/脚本&gt；
&lt；div id=“应用程序”&gt&lt/部门&gt

我们可以使用useRef钩子来存储我们喜欢的任何可变值，因此我们可以使用它来跟踪useffect函数是否第一次运行

如果我们想让效果与componentdiddupdate在同一阶段运行，我们可以使用useLayoutEffect

示例

const{useState，useRef，useLayoutEffect}=React；
函数组件didUpdateFunction（）{
const[count，setCount]=useState（0）；
const firstUpdate=useRef（true）；
使用布局效果（（）=&gt{
if（firstUpdate.current）{
firstUpdate.current=false；
回来
}
log（“componentDidUpdateFunction”）；
});
返回(
&lt；div&gt；
&lt；p&gt；componentDidUpdateFunction:{count}次&lt；/p&gt；
&lt；按钮
onClick={（）=&gt{
设置计数（计数+1）；
}}
&燃气轮机；
点击我
&lt；/button&gt；
&lt；/div&gt；
);
}
ReactDOM.render(
&lt；ComponentDidUpdateFunction/&gt；，
document.getElementById（“应用程序”）
);
&lt；脚本src=”https://unpkg.com/[email protected]/umd/react.development.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://unpkg.com/[email protected]/umd/react dom.development.js“&gt&lt/脚本&gt；
&lt；div id=“应用程序”&gt&lt/部门&gt

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with