React对于流式数据和非流式数据的处理和优化

React 在处理流式数据和非流式数据时，可以借助其组件模型、状态管理以及 React 18 引入的并发特性来实现高效的数据处理与渲染优化。

---

一、流式数据（Streaming Data）

1. 定义

流式数据是指持续不断产生并实时传输的数据，例如通过 WebSocket、Server-Sent Events (SSE) 等方式获取的数据。

2. 常见来源

• WebSocket 实时通信
• Server-Sent Events (SSE)
• MQTT（物联网）
• 长轮询（Long Polling）

3. 处理方式

使用 useState / useReducer 管理状态

const [messages, setMessages] = useState<string[]>([]);

useEffect(() => {
  const ws = new WebSocket('wss://example.com/socket');

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

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

使用 useRef 存储引用（避免重复渲染）

适用于保存连接对象或缓存数据：

const socketRef = useRef<WebSocket | null>(null);

自定义 Hook 封装逻辑

function useWebSocket(url: string) {
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    const ws = new WebSocket(url);
    ws.onmessage = (event) => setMessages(prev => [