当前位置：首页 > React

如何自动刷新react

2026-03-31 09:48:07React

自动刷新 React 组件的实现方法

使用 `setInterval` 定时刷新

在 React 组件中，可以通过 useEffect 钩子和 setInterval 实现定时刷新。在组件挂载时启动定时器，卸载时清除定时器以避免内存泄漏。

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

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

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

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

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

  return (
    <div>
      <h3>自动刷新数据</h3>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

使用自定义 Hook 封装逻辑

将自动刷新的逻辑封装为自定义 Hook，提高代码复用性。

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

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

  useAutoRefresh(() => {
    setCount(prev => prev + 1);
  }, 3000); // 每3秒刷新一次

  return <div>计数: {count}</div>;
}

结合 API 请求实现数据刷新

实际项目中，通常会定时从后端 API 获取最新数据。

function ApiRefreshComponent() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    };

    fetchPosts(); // 立即执行一次
    const intervalId = setInterval(fetchPosts, 10000); // 每10秒刷新

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

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

使用 WebSocket 实现实时更新

对于需要实时性更高的场景，WebSocket 是比轮询更高效的解决方案。

如何自动刷新react

function WebSocketComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket('wss://your-websocket-url');

    socket.onmessage = (event) => {
      setMessages(prev => [...prev, event.data]);
    };

    return () => socket.close();
  }, []);

  return (
    <div>
      {messages.map((msg, i) => (
        <div key={i}>{msg}</div>
      ))}
    </div>
  );
}