当前位置：首页 > React

如何自动刷新react

2026-01-24 02:27:59React

使用 `useEffect` 和 `setInterval`

在 React 中，可以通过 useEffect 结合 setInterval 实现定时刷新功能。以下是一个示例代码：

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

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

  useEffect(() => {
    const fetchData = () => {
      // 替换为实际的数据获取逻辑
      console.log('Fetching data...');
      // 模拟 API 调用
      setTimeout(() => {
        setData(new Date().toLocaleTimeString());
      }, 500);
    };

    fetchData(); // 初始加载
    const intervalId = setInterval(fetchData, 5000); // 每 5 秒刷新一次

    return () => clearInterval(intervalId); // 清除定时器
  }, []);

  return <div>Last updated: {data}</div>;
}

export default AutoRefreshComponent;

使用自定义 Hook 封装逻辑

可以将自动刷新的逻辑封装为自定义 Hook，方便复用：

import { useState, useEffect } from 'react';

function useAutoRefresh(interval = 5000) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = () => {
      console.log('Refreshing data...');
      // 模拟数据更新
      setData(new Date().toLocaleTimeString());
    };

    fetchData();
    const intervalId = setInterval(fetchData, interval);

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

  return data;
}

function AutoRefreshComponent() {
  const data = useAutoRefresh(3000); // 每 3 秒刷新一次
  return <div>Last updated: {data}</div>;
}

结合 API 调用实现数据刷新

如果需要从 API 获取数据并自动刷新，可以修改 fetchData 函数：

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  fetchData();
  const intervalId = setInterval(fetchData, 10000); // 每 10 秒刷新

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

动态调整刷新间隔

可以通过状态管理动态调整刷新间隔：

function DynamicIntervalComponent() {
  const [intervalTime, setIntervalTime] = useState(5000);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = () => {
      setData(new Date().toLocaleTimeString());
    };

    fetchData();
    const intervalId = setInterval(fetchData, intervalTime);

    return () => clearInterval(intervalId);
  }, [intervalTime]);

  return (
    <div>
      <div>Refresh interval: {intervalTime / 1000} seconds</div>
      <div>Last updated: {data}</div>
      <button onClick={() => setIntervalTime(1000)}>1s</button>
      <button onClick={() => setIntervalTime(5000)}>5s</button>
    </div>
  );
}