React应用中XMLHttpRequest流式数据处理与实时渲染优化

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)

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}</pre>
    </div>
  );
}

export default StreamComponent;

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}</pre>
    </div>
  );
}

export default StreamComponentOptimized;

# ... (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')

# ...

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' })); 
};