password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
😀
在React 18中,useEffect 钩子在开发环境中使用 <React.StrictMode> 包裹时会执行两次,这其实是React团队有意为之的一个特性,旨在帮助开发者更早地发现并发模式相关的问题。虽然这个现象在开发时可能会让一些初学者感到困惑,但了解背后的原因和如何应对,将会使你的React开发之路更加顺畅。,打包部署后就没有这个问题。
 
看官方文档是这么说的:
你可以在开发环境中使用 <StrictMode> 以利于暴露并发模式相关的问题。严格模式是不影响生产环境的,但是在开发环境中它将会记录额外的警告日志,并且被视为幂等的函数将被调用两次。
notion image
 
我们在index.js文件中可以看到
notion image
<App /> 组件被 <React.StrictMode> 包裹,因此任何在 <App /> 组件或其子组件中使用的 useEffect 钩子都会被调用两次。
然而,如果你不希望 useEffect 在开发环境中被调用两次,你可以选择移除 <React.StrictMode>
 
但请注意,移除 <React.StrictMode> 可能会让你错过一些潜在的问题。因此,在开发过程中,建议保留 <React.StrictMode>,并确保你的代码能够正确处理其带来的额外调用。
对于 useEffect 钩子被调用两次的情况,你可以通过检查其依赖项和副作用的清理函数来确保代码的正确性
 
💡
有关使用上的问题,欢迎您在底部评论区留言,一起交流~
 
python中用playwright 实现页面点击后获取接口响应数据docker镜像拉取失败,使用阿里云镜像加速器突破网络限制
Loading...