React使用Hooks从服务端获取数据的完整指南

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error('请求失败');
        const data = await response.json();
        setUserData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [userId]); // 依赖项数组

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;
  return (
    <div>
      <h1>{userData.name}</h1>
      <p>邮箱: {userData.email}</p>
    </div>
  );
}

useEffect(() => {
  const controller = new AbortController();
  
  const fetchData = async () => {
    try {
      const response = await fetch(`/api/data`, {
        signal: controller.signal
      });
      // ...处理数据
    } catch (err) {
      if (err.name !== 'AbortError') {
        // 处理真实错误
      }
    }
  };

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

const fetchUser = useCallback(async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}, []);

useEffect(() => {
  fetchUser(userId).then(data => setUserData(data));
}, [fetchUser, userId]);

const cache = useRef({});

useEffect(() => {
  if (cache.current[userId]) {
    setUserData(cache.current[userId]);
    return;
  }

  fetchUser(userId).then(data => {
    cache.current[userId] = data;
    setUserData(data);
  });
}, [userId]);

import { useState, useEffect, useCallback } from 'react';

function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    try {
      const response = await fetch(url, options);
      if (!response.ok) throw new Error(response.statusText);
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [url, options]);

  useEffect(() => {
    const controller = new AbortController();
    options.signal = controller.signal;
    
    fetchData();
    
    return () => controller.abort();
  }, [fetchData]);

  return { data, loading, error, retry: fetchData };
}

// 使用示例
function App() {
  const { data, loading, error } = useFetch('/api/posts');
  // ...渲染逻辑
}

function usePaginatedFetch(baseUrl, initialPage = 1) {
  const [page, setPage] = useState(initialPage);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const { loading, error } = useFetch(`${baseUrl}?page=${page}`, {
    onSuccess: (newData) => {
      setData(prev => [...prev, ...newData.results]);
      setHasMore(newData.hasNext);
    }
  });

  const loadMore = () => {
    if (hasMore && !loading) {
      setPage(p => p + 1);
    }
  };

  return { data, loading, error, loadMore, hasMore };
}

class ErrorBoundary extends React.Component {
  state = { error: null };
  
  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <div className="error-fallback">
          <h2>数据加载失败</h2>
          <button onClick={() => this.setState({ error: null })}>
            重试
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <UserProfile />
</ErrorBoundary>

function useRetryFetch(url, retries = 3) {
  const [retryCount, setRetryCount] = useState(0);
  const state = useFetch(url);

  useEffect(() => {
    if (state.error && retryCount < retries) {
      const timer = setTimeout(() => {
        state.retry();
        setRetryCount(c => c + 1);
      }, 1000 * Math.pow(2, retryCount));
      return () => clearTimeout(timer);
    }
  }, [state.error, retryCount, retries]);

  return { ...state, retriesLeft: retries - retryCount };
}

const pendingRequests = useRef({});

useEffect(() => {
  const requestKey = `${url}-${JSON.stringify(options)}`;
  
  if (pendingRequests.current[requestKey]) {
    return;
  }

  const controller = new AbortController();
  pendingRequests.current[requestKey] = controller;

  fetchData().finally(() => {
    delete pendingRequests.current[requestKey];
  });

  // ...
}, [url, options]);

function usePreload(url) {
  const cache = useContext(DataCacheContext);

  useEffect(() => {
    if (!cache.current[url]) {
      fetch(url)
        .then(res => res.json())
        .then(data => cache.current[url] = data);
    }
  }, [url]);
}

// 在父组件预加载
function ParentComponent() {
  usePreload('/api/user/123');
  // ...
}

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>加载失败</div>;
  if (!data) return <div>加载中...</div>;
  return <div>你好 {data.name}!</div>;
}

import { useQuery } from 'react-query';

function Todos() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('/api/todos').then(res => res.json())
  );

  // ...渲染逻辑
}

src/
├── api/
│   ├── client.js       # 封装axios实例
│   └── users.js        # 用户相关API
├── hooks/
│   ├── useFetch.js     # 基础请求Hook
│   └── usePagination.js # 分页Hook
├── components/
│   └── UserList/
│       ├── index.jsx
│       └── styles.css
└── utils/
    └── errorHandler.js # 统一错误处理

useEffect(() => {
  let isMounted = true;
  
  fetchData().then(data => {
    if (isMounted) setData(data);
  });

  return () => { isMounted = false };
}, []);

const searchResults = useDebouncedFetch(searchQuery, 300);

const client = axios.create({
  baseURL: '/api',
  headers: {
    Authorization: `Bearer ${token}`
  }
});