当前位置：首页 > React

React如何定时刷新

2026-03-31 01:22:13React

使用 setInterval 实现定时刷新

在 React 中，可以通过 setInterval 结合 useEffect 实现定时刷新功能。useEffect 用于处理副作用，setInterval 设置定时器。

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

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

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

    // 立即执行一次
    fetchData();

    // 设置定时器，每5秒刷新一次
    const intervalId = setInterval(fetchData, 5000);

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

  return <div>Current Time: {data}</div>;
}

使用 setTimeout 递归实现

递归调用 setTimeout 可以避免 setInterval 的潜在问题，例如网络请求延迟导致的时间不准确。

useEffect(() => {
  let timeoutId;

  const fetchData = () => {
    console.log('Fetching data...');
    setData(new Date().toLocaleTimeString());

    // 设置下一次刷新
    timeoutId = setTimeout(fetchData, 5000);
  };

  fetchData();

  return () => clearTimeout(timeoutId);
}, []);

自定义 Hook 封装定时刷新

将定时刷新逻辑封装成自定义 Hook，提高复用性。

React如何定时刷新

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    const tick = () => savedCallback.current();
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

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

  useInterval(() => {
    console.log('Fetching data...');
    setData(new Date().toLocaleTimeString());
  }, 5000);

  return <div>Current Time: {data}</div>;
}