React异步数据获取最佳实践

好的，给你一段实用且吸引程序员的React异步数据获取最佳实践示范代码，包含了现代React技术栈的核心点：

• 使用 useEffect 进行副作用管理

• 利用 async/await 简洁写法

• 请求状态管理（loading, error, data）

• 取消未完成的请求（防止内存泄漏和竞态条件）

• 适配多个请求或参数变化

• 支持手动刷新数据

• TypeScript 类型定义（可选）

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

type FetchState<T> = {
  data: T | null;
  loading: boolean;
  error: Error | null;
};

function useAsyncData<T>(
  fetcher: () => Promise<T>,
  deps: any[] = []
): [FetchState<T>, () => void] {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: false,
    error: null,
  })