碎言博客
·
react useEffect() 为什么在开发模式的时候会执行两次？
💡
原文中文，约1500字，阅读约需4分钟。
📝
内容提要
在开发模式下，React的useEffect()可能会执行两次。解决方法是去掉<React.StrictMode>，只保留<App />，以避免重复调用。
🎯
关键要点
- 在开发模式下，React的useEffect()可能会执行两次。
- 使用useEffect的第二个参数，即依赖项数组，可以控制执行次数。
- 指定空数组[]作为依赖项，告诉React仅在组件挂载和卸载时执行一次useEffect。
- 解决方法是去掉<React.StrictMode>，只保留<App />，以避免重复调用。
- 使用React的严格模式StrictMode会导致useEffect在开发模式下执行两次。
❓
延伸问答
为什么在开发模式下useEffect会执行两次？
在开发模式下，使用React的严格模式StrictMode会导致useEffect在组件加载时执行两次。
如何避免useEffect在开发模式下执行两次？
可以通过去掉<React.StrictMode>，只保留<App />来避免useEffect重复调用。
useEffect的依赖项数组有什么作用？
依赖项数组可以控制useEffect的执行次数，指定空数组[]可以使其仅在组件挂载和卸载时执行一次。
在什么情况下useEffect会执行一次？
当使用空数组[]作为依赖项时，useEffect会在组件挂载和卸载时仅执行一次。
React.StrictMode的作用是什么？
React.StrictMode用于帮助识别潜在问题，但在开发模式下会导致某些钩子如useEffect执行两次。
如何在React中使用useEffect？
在React中使用useEffect时，可以传入一个回调函数和一个依赖项数组，控制其执行时机。
🏷️
标签
➡️
