React 网络请求优化

在 React 中，优化网络请求有助于减少不必要的 API 调用、提升用户体验，并降低服务器负载。以下是详细的 React 请求优化方案：

一、避免重复请求

1. 数据缓存

使用 SWR 或 React Query 缓存请求结果：

避免相同数据被重复请求。
提供自动刷新、状态管理和错误处理等功能。
使用 SWR 示例：

import useSWR from "swr";

const fetcher = url => fetch(url).then(res => res.json());

const MyComponent = () => {
   
  const {
    data, error, isValidating } = useSWR("/api/data", fetcher);

  if (error) return <div>Error loading data</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{
   data.name}</div>;
};

使用 React Query 示例：

import {
    useQuery } from "react-query";

const fetchData = async () => {
   
  const response = await fetch("/api/data");
  return response.json();
};

const MyComponent = () => {
   
  const {
    data, isLoading, error } = useQuery("dataKey", fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;

  return <div>{
   data.name}</div>;
};

2. Debounce 和 Throttle 请求

对频繁触发的请求（如输入框实时搜索）使用防抖（Debounce）或节流（Throttle）。
防抖请求示例：