React中XMLHttpRequest流式处理优化

从现在开始，努力学习吧！本文《React中XMLHttpRequest流式处理与实时渲染优化》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

本文深入探讨了React客户端如何利用XMLHttpRequest的onprogress事件高效接收服务器端流式数据，解决了传统onreadystatechange无法分块处理的问题。通过结合setTimeout(0)技巧，优化了React状态更新机制，确保数据实时分块渲染，并涵盖了GET与POST请求下的实现方式，旨在提供一套专业且实用的流式数据处理方案。

理解流式数据与XMLHttpRequest的挑战

在现代Web应用中，实时或准实时的数据传输需求日益增长，流式数据（Streaming Data）应运而生。它允许服务器逐步发送响应，而不是等待所有数据生成完毕后再一次性发送。例如，一个后端服务可能每秒生成一个数字并将其推送到客户端。

以下是一个简单的Flask后端示例，模拟一个每秒生成一个数字的流式接口：

from flask import Flask, Response
import time

app = Flask(__name__)

@app.route('/stream', methods=['GET', 'POST'])
def stream():
    def generate():
        for i in range(10):
            yield f'{i}\n'
            time.sleep(1)
    return Response(generate(), mimetype='text/plain')

if __name__ == '__main__':
    app.run(debug=True)

在React客户端，开发者常会使用XMLHttpRequest来发起HTTP请求。然而，当尝试用xhr.onreadystatechange事件来处理流式数据时，通常会遇到一个问题：数据并非以块的形式逐步到达，而是等到整个响应完成后才一次性接收。这是因为onreadystatechange主要用于监听请求生命周期的状态变化，当readyState达到3（LOADING）时，虽然数据可能正在传输，但xhr.response或xhr.responseText可能尚未完全更新，或者事件触发的粒度不足以捕获每个数据块。

使用onprogress事件实现分块接收

为了正确地接收流式数据，XMLHttpRequest提供了onprogress事件。这个事件专门用于在数据传输过程中跟踪进度，每次接收到新的数据块时都会触发。通过利用onprogress事件，我们可以实时地获取并处理服务器发送的每个数据块。

以下是使用onprogress事件改造后的React客户端代码示例：

import React, { useState } from 'react';

function StreamComponent() {
  const [streamedData, setStreamedData] = useState('');
  let seenBytes = 0; // 用于记录已处理的字节数

  const readStream = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/stream', true); // 或 'POST'
    xhr.responseType = 'text'; // 确保以文本形式处理响应

    xhr.onprogress = function(event) {
      // 从完整的响应文本中提取新的数据块
      const newDataChunk = xhr.responseText.substring(seenBytes);
      console.log('Received chunk:', newDataChunk);

      // 更新状态，这里只是简单追加
      // 注意：直接在这里更新React状态可能导致性能问题或渲染异常，详见下一节优化
      setStreamedData(prevData => prevData + newDataChunk); 

      // 更新已处理的字节数
      seenBytes = xhr.responseText.length;
    };

    xhr.onload = function() {
      // 请求完成，所有数据已接收
      console.log('Stream finished.');
      // 确保处理最后可能剩余的任何数据块
      const finalChunk = xhr.responseText.substring(seenBytes);
      if (finalChunk) {
        setStreamedData(prevData => prevData + finalChunk);
      }
    };

    xhr.onerror = function() {
      console.error('Stream error.');
    };

    xhr.send(); // 如果是POST请求，可以在这里发送请求体，例如 xhr.send(JSON.stringify({ key: 'value' }));
  };

  return (
    <div>
      <button onClick={readStream}>开始接收流数据</button>
      <h3>接收到的数据:</h3>
      <pre>{streamedData}

import React, { useState } from 'react';

function StreamComponentOptimized() {
  const [streamedData, setStreamedData] = useState('');
  let seenBytes = 0;

  const readStream = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/stream', true);
    xhr.responseType = 'text';

    xhr.onprogress = function(event) {
      const newDataChunk = xhr.responseText.substring(seenBytes);
      if (newDataChunk) { // 确保有新数据才处理
        console.log('Received chunk (optimized):', newDataChunk);

        // 使用setTimeout(0)延迟状态更新
        setTimeout(() => {
          setStreamedData(prevData => prevData + newDataChunk);
        }, 0);
      }
      seenBytes = xhr.responseText.length;
    };

    xhr.onload = function() {
      console.log('Stream finished (optimized).');
      const finalChunk = xhr.responseText.substring(seenBytes);
      if (finalChunk) {
        setTimeout(() => {
          setStreamedData(prevData => prevData + finalChunk);
        }, 0);
      }
    };

    xhr.onerror = function() {
      console.error('Stream error (optimized).');
    };

    xhr.send();
  };

  return (
    <div>
      <button onClick={readStream}>开始接收流数据 (优化版)</button>
      <h3>接收到的数据 (优化版):</h3>
      <pre>{streamedData}