react useEffect() 为什么在开发模式的时候会执行两次？
原文中文，约1500字，阅读约需4分钟。
📝
内容提要
在开发模式下，React的useEffect()可能会执行两次。解决方法是去掉<React.StrictMode>，只保留<App />，以避免重复调用。
🔎
延伸解读
开发模式下的useEffect行为
在React的开发模式中，useEffect()的执行次数可能会让开发者感到困惑。这是因为React的严格模式会导致组件在开发时被渲染两次，以帮助识别潜在的问题。了解这一点可以帮助开发者更好地调试和优化代码。
依赖项数组的重要性
使用useEffect时，依赖项数组的设置至关重要。通过指定空数组[]，可以确保useEffect仅在组件挂载和卸载时执行一次。这种控制机制有助于避免不必要的副作用，提升应用性能。
去掉StrictMode的影响
如果开发者希望在开发模式下避免useEffect的重复执行，可以选择去掉<React.StrictMode>。虽然严格模式有助于发现潜在问题，但在某些情况下，去掉它可以简化调试过程，尤其是在测试代码时。
❓
Q&A
为什么在开发模式下useEffect会执行两次？
在开发模式下，使用React的严格模式StrictMode会导致useEffect在组件加载时执行两次。
如何避免useEffect在开发模式下执行两次？
可以通过去掉<React.StrictMode>，只保留<App />来避免useEffect重复调用。
useEffect的依赖项数组有什么作用？
依赖项数组可以控制useEffect的执行次数，指定空数组[]可以使其仅在组件挂载和卸载时执行一次。
在什么情况下useEffect会执行一次？
当使用空数组[]作为依赖项时，useEffect会在组件挂载和卸载时仅执行一次。
React.StrictMode的作用是什么？
React.StrictMode用于帮助识别潜在问题，但在开发模式下会导致某些钩子如useEffect执行两次。
如何在React中使用useEffect？
在React中使用useEffect时，可以传入一个回调函数和一个依赖项数组，控制其执行时机。
🏷️
