为什么我的 useEffect Hook 在 React 18 开发模式下组件挂载时触发两次？

useEffect 在组件挂载时触发两次

问题：

当将 useEffect 与仅包含状态的依赖项数组一起使用时，在 React 18 开发中，效果函数在初始安装时被调用两次

说明：

React 18 引入了一个支持重新挂载具有相同状态的组件的功能，该功能可以提供更好的开箱即用性能，但需要组件来处理多次安装和销毁效果。

为了暴露潜在的问题，React 在开发模式下会自动卸载并重新安装每个组件一次。此重新挂载会第二次触发 useEffect 函数。

解决方案：

此行为旨在发现效果逻辑中现有的错误。正确的方法是调整效果实现以正确处理多个安装。

建议：

1.使用清理函数：

实现 useEffect 清理函数以在组件卸载时停止或撤消效果的操作。这确保了效果对组件状态和副作用的影响在生产和开发模式之间保持一致。

2.缓存 HTTP 请求：

采用重复数据删除和缓存 HTTP 请求的技术来优化性能并避免冗余的网络操作。考虑使用实现缓存机制的数据获取库或钩子。

3.检查您的 useEffect 用法：

确保正确使用 useEffect，而不是用于初始化应用程序状态或执行不应在重新挂载时重复的操作。请参阅“不是效果”原则作为指导：

• 不是效果：初始化应用程序
• 不是效果：购买产品

其他注意事项：

• 此行为仅发生在发展模式。在生产中，useEffect 只会被调用一次。
• 不鼓励尝试使用 useRef 和 useEffect 中的 if 语句或删除 StrictMode 来解决重新挂载行为。
• 阅读有关 useEffect 的详细 React 文档可以提供有关该主题的进一步见解。

以上是为什么我的 useEffect Hook 在 React 18 开发模式下组件挂载时触发两次？的详细内容。更多信息请关注PHP中文网其他相关文章！