React如何定时刷新

使用setInterval实现定时刷新

在React中，可以通过setInterval在组件挂载时设置定时器，组件卸载时清除定时器。这种方式适用于需要在固定间隔执行某些操作的场景。

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

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

  useEffect(() => {
    const fetchData = () => {
      // 模拟API调用
      console.log('Fetching data...');
      setData(new Date().toLocaleTimeString());
    };

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

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

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

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

使用setTimeout实现递归刷新

对于需要更精确控制或条件性刷新的场景，可以使用setTimeout配合递归调用。这种方法能更好地处理异步操作可能导致的延迟。

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

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

  useEffect(() => {
    let timeoutId;

    const fetchData = async () => {
      try {
        // 模拟API调用
        console.log('Fetching data...');
        setData(new Date().toLocaleTimeString());
      } finally {
        // 无论成功失败都继续刷新
        timeoutId = setTimeout(fetchData, 3000);
      }
    };

    fetchData();

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

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

使用自定义Hook封装刷新逻辑

将刷新逻辑封装成自定义Hook可以提高代码复用性。这个Hook可以返回刷新状态和控制方法。

import { useState, useEffect } from 'react';

function useIntervalRefresh(callback, delay) {
  useEffect(() => {
    const intervalId = setInterval(callback, delay);
    return () => clearInterval(intervalId);
  }, [callback, delay]);
}

function CustomHookComponent() {
  const [count, setCount] = useState(0);

  useIntervalRefresh(() => {
    setCount(c => c + 1);
  }, 1000);

  return <div>Count: {count}</div>;
}

结合Redux或Context的全局刷新

当需要在多个组件间共享刷新状态时，可以结合状态管理工具实现全局定时刷新。

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { updateData } from './dataSlice';

function GlobalRefreshComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);

  useEffect(() => {
    const intervalId = setInterval(() => {
      dispatch(updateData());
    }, 2000);

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

  return <div>Global data: {data}</div>;
}

注意事项

定时刷新需要考虑性能影响，特别是在以下场景：

• 组件卸载时必须清除定时器，避免内存泄漏
• 网络请求要考虑节流和错误处理
• 移动端应用需要注意后台运行的策略
• 频繁刷新要考虑服务器压力

对于需要精确时间控制的场景，可以使用requestAnimationFrame或专门的定时器库，但多数情况下setInterval和setTimeout已能满足需求。