password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
在React 18中,
useEffect
钩子在开发环境中使用 <React.StrictMode>
包裹时会执行两次,这其实是React团队有意为之的一个特性,旨在帮助开发者更早地发现并发模式相关的问题。虽然这个现象在开发时可能会让一些初学者感到困惑,但了解背后的原因和如何应对,将会使你的React开发之路更加顺畅。,打包部署后就没有这个问题。看官方文档是这么说的:
你可以在开发环境中使用
<StrictMode>
以利于暴露并发模式相关的问题。严格模式是不影响生产环境的,但是在开发环境中它将会记录额外的警告日志,并且被视为幂等的函数将被调用两次。
我们在index.js文件中可以看到

<App />
组件被 <React.StrictMode>
包裹,因此任何在 <App />
组件或其子组件中使用的 useEffect
钩子都会被调用两次。然而,如果你不希望
useEffect
在开发环境中被调用两次,你可以选择移除 <React.StrictMode>
:但请注意,移除
<React.StrictMode>
可能会让你错过一些潜在的问题。因此,在开发过程中,建议保留 <React.StrictMode>
,并确保你的代码能够正确处理其带来的额外调用。对于
useEffect
钩子被调用两次的情况,你可以通过检查其依赖项和副作用的清理函数来确保代码的正确性有关使用上的问题,欢迎您在底部评论区留言,一起交流~
- 作者:躁静有徒
- 链接:https://blog.zaojingyoutu.top//article/b2d62cae-7447-454d-b141-396b84834432
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章