React严格模式下API请求重复执行问题解析与解决方案-代码聚汇网

React严格模式下API请求重复执行问题解析与解决方案

happy最紧要

1. React请求API重复执行问题现象解析

最近在React项目中遇到一个奇怪的现象：组件中定义的API请求会被自动执行两次。这个问题在开发环境中尤为明显，但在生产环境中也可能出现。让我们先通过一个典型示例来重现这个问题：

javascript复制function UserProfile() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    console.log('Fetching user data...'); // 会打印两次
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUserData(data));
  }, []);

  return <div>{/* 用户信息展示 */}</div>;
}

这个现象的产生与React的工作机制密切相关。当我们在开发模式下运行React应用时，React会故意执行两次某些操作，目的是帮助开发者更容易发现副作用问题。这种行为被称为"严格模式双重渲染"。

重要提示：这种双重执行只发生在开发环境，生产环境会自动禁用。但理解其原理对写出健壮的React代码至关重要。

2. 严格模式与开发环境双重渲染机制

2.1 React StrictMode的设计初衷

React的StrictMode是一个开发工具，它通过故意重复调用特定函数来帮助开发者发现潜在问题。这包括：

组件生命周期方法
状态更新函数
某些Hooks（如useEffect、useMemo等）
构造函数

这种机制确保了你的组件能够正确处理"挂载→卸载→重新挂载"的完整生命周期，模拟用户操作可能导致的组件状态变化。

2.2 为什么API请求会被触发两次

在严格模式下，React会：

首次渲染组件并执行所有副作用
立即卸载组件
重新挂载组件并再次执行所有副作用

这种设计能暴露出以下问题：

未正确清理的副作用（如未取消的订阅）
内存泄漏风险
不纯的计算逻辑

对于API请求来说，这意味着：

第一次请求发出后可能还未完成
组件被卸载导致请求被中断
第二次请求立即发出
最终可能导致竞态条件（race condition）

3. 解决方案与最佳实践

3.1 方案一：使用AbortController取消重复请求

这是最推荐的解决方案，它不仅能解决双重渲染问题，还能提升应用性能：

javascript复制function UserProfile() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    
    const fetchData = async () => {
      try {
        const response = await fetch('/api/user', {
          signal: controller.signal
        });
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('Fetch error:', error);
        }
      }
    };

    fetchData();
    
    return () => controller.abort();
  }, []);

  return <div>{/* 用户信息展示 */}</div>;
}

关键点：

创建AbortController实例
将signal传递给fetch
在清理函数中调用abort()
捕获并忽略AbortError

3.2 方案二：使用请求缓存避免重复请求

对于幂等且可缓存的请求，可以考虑使用缓存机制：

javascript复制const requestCache = new Map();

function useUserData(userId) {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (requestCache.has(userId)) {
      setData(requestCache.get(userId));
      return;
    }

    const controller = new AbortController();
    
    fetch(`/api/user/${userId}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => {
        requestCache.set(userId, data);
        setData(data);
      });

    return () => controller.abort();
  }, [userId]);

  return data;
}

3.3 方案三：使用状态管理库集中管理API状态

对于复杂应用，推荐使用Redux、Zustand等状态管理库配合RTK Query、React Query等数据获取方案：

javascript复制// 使用React Query示例
import { useQuery } from 'react-query';

function UserProfile() {
  const { data, isLoading } = useQuery('userData', () =>
    fetch('/api/user').then(res => res.json())
  );

  if (isLoading) return <div>Loading...</div>;

  return <div>{/* 使用data渲染 */}</div>;
}

React Query的优势：

内置请求去重
自动重试机制
缓存管理
后台数据更新

4. 高级场景与疑难排查

4.1 生产环境中的重复请求问题

虽然严格模式只在开发环境启用双重渲染，但生产环境中仍可能遇到重复请求，常见原因包括：

组件快速重新挂载：路由跳转时组件可能快速卸载/挂载
依赖数组变化：useEffect依赖项意外变化
事件监听器重复绑定：未正确清理事件监听器

解决方案：

始终实现清理逻辑
使用useRef跟踪请求状态
添加防抖/节流逻辑

4.2 使用useRef跟踪请求状态

javascript复制function UserProfile() {
  const [userData, setUserData] = useState(null);
  const isFetching = useRef(false);

  useEffect(() => {
    if (isFetching.current) return;
    
    isFetching.current = true;
    const controller = new AbortController();
    
    fetch('/api/user', { signal: controller.signal })
      .then(res => res.json())
      .then(data => {
        setUserData(data);
        isFetching.current = false;
      });

    return () => {
      isFetching.current = false;
      controller.abort();
    };
  }, []);

  return <div>{/* 渲染逻辑 */}</div>;
}

4.3 与Suspense结合使用的特殊考虑

当使用React的Suspense特性时，数据获取模式会有所不同：

javascript复制const userDataResource = fetchUserData(); // 返回一个特殊对象

function UserProfile() {
  const data = userDataResource.read(); // 可能抛出Promise
  return <div>{/* 渲染数据 */}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}

在这种模式下，React会自行处理数据获取的协调问题，但仍需注意：

确保数据源实现了正确的缓存
避免在渲染函数中直接创建资源
考虑错误边界处理

5. 性能优化与调试技巧

5.1 使用React DevTools分析请求行为

React DevTools提供了强大的分析工具：

打开组件树并找到你的组件
查看组件的渲染次数
使用"Highlight updates"功能观察重渲染
检查useEffect的执行时间线

5.2 网络面板中的请求监控

浏览器开发者工具的网络面板可以帮助你：

识别重复请求
分析请求时序
检查请求取消情况
查看请求的initiator（发起者）

5.3 自定义Hook封装最佳实践

将API请求逻辑封装成自定义Hook可以提高代码复用性：

javascript复制function useApi(endpoint, options = {}) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  const abortRef = useRef(null);

  useEffect(() => {
    const fetchData = async () => {
      abortRef.current?.abort();
      abortRef.current = new AbortController();
      
      try {
        setLoading(true);
        const response = await fetch(endpoint, {
          ...options,
          signal: abortRef.current.signal
        });
        const result = await response.json();
        setData(result);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => abortRef.current?.abort();
  }, [endpoint, options]);

  return { data, error, loading };
}

使用示例：

javascript复制function UserProfile() {
  const { data, loading } = useApi('/api/user');
  
  if (loading) return <div>Loading...</div>;
  return <div>{/* 渲染数据 */}</div>;
}

6. 常见误区与陷阱

6.1 错误：依赖空数组但仍触发多次请求

javascript复制// 反例
useEffect(() => {
  fetch('/api/data'); // 仍可能执行多次
}, []); // 空依赖数组

原因：依赖数组只控制effect的触发时机，不控制React的严格模式行为

6.2 错误：忽略清理函数导致内存泄漏

javascript复制// 反例
useEffect(() => {
  const timer = setInterval(() => {
    fetch('/api/poll');
  }, 5000);
  
  // 缺少清理interval的逻辑
}, []);

正确做法：

javascript复制useEffect(() => {
  const controller = new AbortController();
  const timer = setInterval(() => {
    fetch('/api/poll', { signal: controller.signal });
  }, 5000);
  
  return () => {
    clearInterval(timer);
    controller.abort();
  };
}, []);

6.3 错误：在条件语句中使用Hooks

javascript复制// 反例
if (shouldFetch) {
  useEffect(() => { // 违反Hook规则
    fetch('/api/data');
  }, []);
}

正确做法：

javascript复制useEffect(() => {
  if (shouldFetch) {
    fetch('/api/data');
  }
}, [shouldFetch]); // 将条件移入effect内部

7. 测试策略与质量保障

7.1 编写健壮的测试用例

使用React Testing Library测试API组件：

javascript复制import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';

// 模拟fetch
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ name: 'John Doe' }),
  })
);

test('displays user data after fetch', async () => {
  render(<UserProfile />);
  
  // 初始应该显示加载状态
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  
  // 等待数据加载完成
  await waitFor(() => {
    expect(screen.getByText('John Doe')).toBeInTheDocument();
  });
  
  // 确保fetch只被调用一次（即使在严格模式下）
  expect(fetch).toHaveBeenCalledTimes(1);
});

7.2 处理测试中的严格模式

在测试中显式启用严格模式：

javascript复制test('handles strict mode correctly', async () => {
  render(
    <React.StrictMode>
      <UserProfile />
    </React.StrictMode>
  );
  
  // 测试应该能够处理双重渲染
  await waitFor(() => {
    expect(screen.getByText('John Doe')).toBeInTheDocument();
  });
});

7.3 模拟网络错误场景

测试错误处理逻辑：

javascript复制test('handles fetch errors', async () => {
  global.fetch.mockRejectedValueOnce(new Error('Network error'));
  
  render(<UserProfile />);
  
  await waitFor(() => {
    expect(screen.getByText('Error loading data')).toBeInTheDocument();
  });
});

8. 架构层面的思考

8.1 何时应该禁用严格模式

虽然不推荐，但在某些情况下可能需要临时禁用严格模式：

javascript复制// 移除<StrictMode>包装
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

禁用严格模式的合理场景：

集成旧版代码的过渡期
性能关键型组件
与某些第三方库不兼容时

8.2 微前端架构中的特殊考虑

在微前端架构中，API请求问题可能更复杂：

主应用和子应用可能各自有严格模式
共享的请求库需要特殊处理
需要考虑跨应用的请求取消