react如何刷新数据

使用useEffect钩子

在React中，useEffect是处理数据刷新的核心方法。通过依赖项数组控制副作用执行时机，当依赖项变化时，会自动触发数据重新获取。

import { useState, useEffect } from 'react';

function DataComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []); // 空数组表示仅在组件挂载时执行
}

手动触发刷新

通过状态变量（如refreshKey）强制useEffect重新执行。修改refreshKey会触发组件重新渲染和副作用更新。

function DataComponent() {
  const [data, setData] = useState([]);
  const [refreshKey, setRefreshKey] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, [refreshKey]); // 依赖refreshKey变化

  const handleRefresh = () => {
    setRefreshKey(prev => prev + 1); // 触发重新获取
  };

  return <button onClick={handleRefresh}>刷新数据</button>;
}

使用SWR或React Query库

第三方库如SWR或React Query提供了更高效的数据管理方案，内置缓存和自动刷新功能。

SWR示例：

import useSWR from 'swr';

function DataComponent() {
  const { data, mutate } = useSWR('https://api.example.com/data', fetcher);

  const handleRefresh = () => {
    mutate(); // 手动触发重新验证
  };

  return <button onClick={handleRefresh}>刷新数据</button>;
}

React Query示例：

import { useQuery, queryClient } from 'react-query';

function DataComponent() {
  const { data, refetch } = useQuery('dataKey', fetchData);

  return <button onClick={refetch}>刷新数据</button>;
}

上下文或状态管理集成

在复杂应用中，通过Redux或Context API全局管理数据状态，结合useEffect或动作分发实现跨组件数据同步刷新。

// 使用Context示例
const DataContext = createContext();

function DataProvider({ children }) {
  const [data, setData] = useState([]);
  const refreshData = () => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(setData);
  };

  return (
    <DataContext.Provider value={{ data, refreshData }}>
      {children}
    </DataContext.Provider>
  );
}

// 子组件中调用
function ChildComponent() {
  const { refreshData } = useContext(DataContext);
  return <button onClick={refreshData}>刷新全局数据</button>;
}

轮询自动刷新

通过setInterval实现定时数据刷新，需在useEffect中清理定时器防止内存泄漏。

useEffect(() => {
  const interval = setInterval(() => {
    fetchData(); // 定义数据获取逻辑
  }, 5000); // 每5秒刷新

  return () => clearInterval(interval);
}, []);