当前位置：首页 > React

React如何定时刷新

2026-02-11 22:18:33React

React 定时刷新的实现方法

在React中实现定时刷新可以通过多种方式完成，以下是几种常见的方法：

使用 setInterval 和 useEffect

利用React的useEffect钩子和JavaScript的setInterval函数可以轻松实现定时刷新。需要在组件卸载时清除定时器以避免内存泄漏。

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

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

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

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

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

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

使用 setTimeout 和递归

通过setTimeout和递归调用可以实现类似的定时刷新效果，这种方式在某些场景下可能更灵活。

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

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

  useEffect(() => {
    let timeoutId;

    const fetchData = () => {
      console.log('Fetching data...');
      setData(new Date().toLocaleTimeString());
      timeoutId = setTimeout(fetchData, 5000); // 设置下一次刷新
    };

    fetchData(); // 初始调用

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

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

使用第三方库

对于更复杂的定时任务管理，可以考虑使用第三方库如react-use中的useInterval钩子，或者rxjs等响应式编程库。

import { useInterval } from 'react-use';

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

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

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