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 (
    

      开始接收流数据
      
接收到的数据:
      
{streamedData}
    
  );
}

export default StreamComponent;

关键点：

• xhr.onprogress: 代替onreadystatechange来监听数据接收进度。
• xhr.responseText: 在onprogress事件中，xhr.responseText会包含所有已接收的数据。
• seenBytes: 这是一个至关重要的变量，用于记录上一次onprogress事件触发时xhr.responseText的长度。通过xhr.responseText.substring(seenBytes)，我们可以准确地提取出本次新接收到的数据块。
• xhr.responseType = 'text': 明确指定响应类型为文本，避免浏览器尝试解析为其他类型。

优化React状态更新以实现实时渲染

尽管onprogress事件能够分块接收数据，但直接在每次事件触发时调用setStreamedData更新React状态，可能会导致频繁的组件渲染，甚至在某些情况下，由于React的批量更新机制，可能无法立即看到每个数据块的实时追加效果。为了确保每次数据块到达时都能触发一次独立的渲染，并让React有机会更新DOM，我们可以利用setTimeout(0)技巧。

setTimeout(0)将回调函数放入事件队列的末尾，使其在当前事件循环中的所有同步任务执行完毕后立即执行。这有效地将状态更新操作推迟到下一个事件循环周期，从而允许浏览器在处理完当前批次的JS代码后进行渲染，进而实现更实时的UI更新。

以下是结合setTimeout(0)进行优化的代码：

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 (
    

      开始接收流数据 (优化版)
      
接收到的数据 (优化版):
      
{streamedData}
    
  );
}

export default StreamComponentOptimized;

优化原理： 通过将setStreamedData调用包装在setTimeout(0)中，我们确保了每次接收到数据块后，状态更新操作不会立即执行，而是被推迟到当前JavaScript执行栈清空之后。这为React提供了在每次新数据块到达并更新状态后，进行一次独立渲染的机会，从而在UI上实现了数据的实时分块显示。

处理POST请求的流式数据

实际应用中，流式数据可能需要通过POST请求发送额外的请求体。XMLHttpRequest同样支持POST请求下的流式数据接收。

服务端（Flask）修改： 只需在路由中允许POST方法。示例代码中已包含methods=['GET', 'POST']。如果需要处理请求体，可以从request.get_json()或request.form中获取。

# ... (Flask应用初始化)

@app.route('/stream', methods=['POST']) # 仅允许POST，或同时允许GET
def stream_post():
    # 假设POST请求体中包含一些数据，可以根据需要处理
    # data_from_client = request.get_json() 
    # print(f"Received POST data: {data_from_client}")

    def generate():
        for i in range(10):
            yield f'POST response chunk {i}\n'
            time.sleep(1)
    return Response(generate(), mimetype='text/plain')

# ...

客户端（React）修改： 只需在xhr.open方法中指定'POST'，并在xhr.send()中传递请求体。

const readStreamWithPost = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/stream', true); // 将GET改为POST
  xhr.responseType = 'text';
  xhr.setRequestHeader('Content-Type', 'application/json'); // 如果发送JSON数据

  xhr.onprogress = function(event) {
    // ... 同GET请求的onprogress处理逻辑 ...
  };
  xhr.onload = function() { /* ... */ };
  xhr.onerror = function() { /* ... */ };

  // 发送请求体，例如JSON数据
  xhr.send(JSON.stringify({ requestParam: 'someValue' })); 
};

现代HTTP客户端与流式数据处理

尽管本文主要聚焦于XMLHttpRequest，但值得一提的是，现代Web开发中，Fetch API和Axios等HTTP客户端提供了更简洁、更强大的API来处理HTTP请求，包括流式数据。

• Fetch API: 原生支持Response.body的ReadableStream，结合TextDecoder和AsyncIterator可以优雅地处理流式数据。
• Axios: 虽然Axios本身不直接提供onprogress用于响应流，但可以通过配置responseType: 'stream'或结合Fetch API来间接实现。

对于新的项目或对浏览器兼容性要求不那么极致的场景，优先考虑使用Fetch API处理流式数据，它提供了更符合现代JavaScript异步编程范式的解决方案。

总结与注意事项

在React应用中处理XMLHttpRequest的流式数据接收，关键在于：

1. 使用xhr.onprogress事件：它是专门为跟踪数据传输进度而设计的，能够实时捕获数据块。
2. 维护seenBytes：通过记录已处理的字节数，从xhr.responseText中准确提取新的数据块。
3. 利用setTimeout(0)优化React状态更新：确保每次数据块到达后都能触发独立的渲染，从而实现实时UI更新，避免因React批量更新导致的显示延迟。
4. 适配GET/POST请求：根据业务需求调整xhr.open方法和xhr.send()内容。
5. 错误处理与完成状态：务必实现xhr.onload和xhr.onerror来处理请求的最终状态。

虽然XMLHttpRequest可以实现流式数据处理，但在构建新的应用时，建议评估Fetch API等现代HTTP客户端，它们通常提供更简洁、功能更丰富的流式处理机制。无论选择哪种方式，理解数据流的底层机制对于构建高效、响应迅速的Web应用至关重要。

终于介绍完啦！小伙伴们，这篇关于《React中XMLHttpRequest流式处理优化》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！