React函数组件中useEffect重复执行两次问题求助

API 探路者

2026-7-16

解决useEffect执行两次的问题

1. React 18 严格模式导致的重复执行

React 18 在开发环境（process.env.NODE_ENV === 'development'）的严格模式下，会故意重复执行useEffect、useState初始化函数等，目的是检测组件中是否存在未正确清理的副作用（比如未销毁的定时器、重复的事件订阅）。这是开发环境的专属特性，生产环境不会出现该情况。

解决办法：

若只是开发调试时的困扰，可暂时关闭严格模式：找到项目入口文件（如index.js/main.jsx）中包裹App的<StrictMode>标签，直接移除即可。

确保你的useEffect副作用具备可重复执行性，且能通过返回函数完成清理：

useEffect(() => {
  // 监听iframe消息的逻辑
  const messageHandler = (event) => {
    // 处理iframe传来的评论数据
  };
  window.addEventListener('message', messageHandler);

  // 组件卸载或依赖更新时清理监听
  return () => {
    window.removeEventListener('message', messageHandler);
  };
}, [/* 依赖项数组 */]);

2. 组件重复渲染触发useEffect

如果getFacebookCommants组件（或其父组件）因状态、props频繁变化导致重复渲染，也会触发useEffect重新执行。

排查与解决：

检查父组件传递的props：若props是每次渲染都重新创建的对象/数组（比如直接在render中写props={{ id: 123 }}），会让组件误判props变化，引发重复渲染。可使用useMemo缓存props：
```
// 父组件中
const memoizedProps = useMemo(() => ({
  postId: 'your-post-id'
}), ['your-post-id']);

return <getFacebookCommants {...memoizedProps} />;
```
检查useEffect的依赖项数组：确保只传入必要的依赖，避免依赖项频繁变化导致useEffect重复执行。若无需依赖，传入空数组[]即可让useEffect仅在组件挂载时执行一次。