ReactJS实时应用开发：每秒获取JSON数据的最优实现方案

方案一：带请求取消的定时轮询（适合后端仅支持HTTP接口的场景） #

如果后端只能通过HTTP接口提供数据，最稳妥的方式是结合 useEffect、setInterval 和 AbortController 实现轮询，同时避免内存泄漏和无效请求堆积。

代码示例 #

import { useState, useEffect } from 'react';

function RealTimeDataComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const abortController = new AbortController();
    const intervalId = setInterval(async () => {
      setIsLoading(true);
      try {
        const response = await fetch('/api/realtime-data', {
          signal: abortController.signal,
        });
        if (!response.ok) throw new Error('请求失败');
        const jsonData = await response.json();
        setData(jsonData);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') { // 忽略取消请求的错误
          setError(err.message);
        }
      } finally {
        setIsLoading(false);
      }
    }, 1000); // 每秒执行一次

    // 组件卸载或依赖更新时清理定时器和请求
    return () => {
      clearInterval(intervalId);
      abortController.abort();
    };
  }, []);

  return (
    <div>
      {isLoading && <p>加载中...</p>}
      {error && <p className="error">错误：{error}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default RealTimeDataComponent;

关键注意点 #

• 清理定时器：在 useEffect 的返回函数中调用 clearInterval，防止组件卸载后定时器继续运行导致内存泄漏。
• 取消未完成请求：使用 AbortController 在组件卸载时取消正在进行的请求，避免无效请求占用资源。
• 错误处理：区分请求取消的错误和其他业务错误，避免错误提示干扰用户。
• 加载状态：添加加载状态，提升用户体验。

方案二：WebSocket 双向通信（高效实时场景首选） #

如果后端支持 WebSocket，这是比轮询更高效的方案——后端可以主动推送数据，无需前端每秒发起请求，大幅减少网络开销。

代码示例 #

import { useState, useEffect } from 'react';

function RealTimeWSComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 建立WebSocket连接
    const ws = new WebSocket('ws://your-server-url/ws/realtime-data');

    // 接收后端推送的数据
    ws.onmessage = (event) => {
      try {
        const jsonData = JSON.parse(event.data);
        setData(jsonData);
        setError(null);
      } catch (err) {
        setError('解析数据失败');
      }
    };

    // 处理连接错误
    ws.onerror = (err) => {
      setError(`WebSocket错误：${err.message}`);
    };

    // 组件卸载时关闭连接
    return () => {
      ws.close();
    };
  }, []);

  return (
    <div>
      {error && <p className="error">错误：{error}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default RealTimeWSComponent;

优势 #

• 低延迟：后端数据更新时立即推送给前端，无需等待轮询周期。
• 低带宽：避免每秒一次的HTTP请求开销，仅在有数据变化时传输。
• 双向通信：前端也可以向后端发送指令（比如订阅特定数据）。

方案选择建议 #

• 如果后端仅支持HTTP接口，优先使用带请求取消的定时轮询，确保稳定性和资源合理利用。
• 如果后端支持WebSocket，优先选择WebSocket方案，获得更高效的实时体验。

内容的提问来源于stack exchange，提问作者Velleda