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

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

理解流式数据与XMLHttpRequest的挑战

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

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

from flask import Flask, Responseimport timeapp = 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，或同时允许GETdef 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的流式数据接收，关键在于：
使用xhr.onprogress事件：它是专门为跟踪数据传输进度而设计的，能够实时捕获数据块。维护seenBytes：通过记录已处理的字节数，从xhr.responseText中准确提取新的数据块。利用setTimeout(0)优化React状态更新：确保每次数据块到达后都能触发独立的渲染，从而实现实时UI更新，避免因React批量更新导致的显示延迟。适配GET/POST请求：根据业务需求调整xhr.open方法和xhr.send()内容。错误处理与完成状态：务必实现xhr.onload和xhr.onerror来处理请求的最终状态。
虽然XMLHttpRequest可以实现流式数据处理，但在构建新的应用时，建议评估Fetch API等现代HTTP客户端，它们通常提供更简洁、功能更丰富的流式处理机制。无论选择哪种方式，理解数据流的底层机制对于构建高效、响应迅速的Web应用至关重要。
以上就是React应用中XMLHttpRequest流式数据处理与实时渲染优化的详细内容，更多请关注创想鸟其它相关文章！
                                                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。

发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519003.html
                        

                        aiiosjavajavascriptjsjsonreact浏览器组件渲染
                        
                             赞 (0)
                                                            
                                     打赏                                    
                                                                                    
                                                
                                                    微信扫一扫                                            
                                                                                                                            
                                                
                                                    支付宝扫一扫                                            
                                                                            
                                
                                                    

                        
                            
                                                                
                                    
                                                                                     0                                         0                                                                            
                                    
                                                                                    
                                                 生成海报

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

React 中使用 XMLHttpRequest 实现数据流式传输

上一篇 2025年12月20日 12:03:09

解决Safari浏览器SVG动画不显示的问题

下一篇 2025年12月20日 12:03:21

用户投稿

修复Django电商项目中AJAX过滤产品列表图片不显示问题

在Django电商项目中，当使用AJAX动态加载过滤后的产品列表时，常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式（如data-setbg属性结合JavaScript库）与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片，确保浏览…

程序猿
2026年5月10日
7000
用户投稿

开源免费PHP工具 PHP开发效率提升利器

推荐开源免费PHP开发工具以提升效率：VS Code、Sublime Text轻量高效，PhpStorm专业强大；调试用Xdebug、Kint、Ray；依赖管理选Composer；代码质量工具包括PHPStan、Psalm、PHP_CodeSniffer；数据库管理可用%ignore_a_1%MyA…

程序猿
2026年5月10日
0000
用户投稿

Golang JSON序列化：控制敏感字段暴露的最佳实践

本教程探讨golang中如何高效控制结构体字段在json序列化时的可见性。当需要将包含敏感信息的结构体数组转换为json响应时，通过利用`encoding/json`包提供的结构体标签，特别是`json:”-“`，可以轻松实现对特定字段的忽略，从而避免敏感数据泄露，确保api…

程序猿
2026年5月10日
3000
用户投稿

比特币新手教程比特币交易平台有哪些

比特币是一种去中心化的数字货币，基于区块链技术实现点对点交易，具有匿名性、有限发行和不可篡改等特点；新手可通过交易所购买，P2P交易获得比特币，常用平台包括Binance、OKX和Huobi；交易流程包括注册账户、实名认证、绑定支付方式、充值法币并下单购买，可选择市价单或限价单；比特币存储方式有交易…

程序猿
2026年5月10日
0000
用户投稿

c++中的SFINAE技术是什么_c++模板编程中的SFINAE原理与应用

SFINAE 是“替换失败不是错误”的原则，指模板实例化时若参数替换导致错误，只要存在其他合法候选，编译器不报错而是继续重载决议。它用于条件启用模板、类型检测等场景，如通过 decltype 或 enable_if 控制函数重载，实现类型特征判断。尽管 C++20 引入 Concepts 简化了部分…

程序猿
2026年5月10日
0000
用户投稿

Go语言mgo查询构建：深入理解bson.M与日期范围查询的正确实践

本文旨在解决go语言mgo库中构建复杂查询时，特别是涉及嵌套`bson.m`和日期范围筛选的常见错误。我们将深入剖析`bson.m`的类型特性，解释为何直接索引`interface{}`会导致“invalid operation”错误，并提供一种推荐的、结构清晰的代码重构方案，以确保查询条件能够正确…

程序猿
2026年5月10日
1000
用户投稿

vscode上怎么运行html_vscode上运行html步骤【指南】

首先保存文件为.html格式，再通过浏览器或Live Server插件打开预览；推荐安装Live Server实现本地服务器运行与实时刷新，提升开发体验。在 VS Code 上运行 HTML 文件并不需要复杂的配置，只需几个简单步骤即可预览页面效果。VS Code 本身是一个代码编辑器，不直接运行…

程序猿
2026年5月10日
1000
用户投稿

修复点击时按钮抖动：CSS垂直对齐实践

本文探讨了在Web开发中，交互式按钮（如播放/暂停按钮）在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响，我们发现这是由于按钮不同状态下的边框样式和内边距改变，以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性，将其设置为middle…

程序猿
2026年5月10日
1000
用户投稿

Golang goroutine与channel调试技巧

使用go run -race检测数据竞争，结合runtime.NumGoroutine监控协程数量，通过pprof分析阻塞调用栈，利用select超时避免永久阻塞，有效排查goroutine泄漏、死锁和数据竞争问题。 Go语言的goroutine和channel是并发编程的核心，但它们也带来了调试上…

程序猿
2026年5月10日
0000
《魔兽世界》将于6月11日开启国服回归技术测试

《%ign%ignore_a_1%re_a_1%》官方宣布，将于6月11日开启国服回归技术测试，时间为7天，并称可以在6月内正式开服，玩家们可以访问官网下载战网客户端并预下载“巫妖王之怒”客户端，技术测试详情见下图。 WordAi WordAI是一个AI驱动的内容重写平台 53 查看详情以上就是《…

程序猿
2026年5月10日 • 用户投稿
4000
用户投稿

使用 Jupyter Notebook 进行探索性数据分析

Jupyter Notebook通过单元格实现代码与Markdown结合，支持数据导入（pandas）、清洗（fillna）、探索（matplotlib/seaborn可视化）、统计分析（describe/corr）和特征工程，便于记录与分享分析过程。 Jupyter Notebook 是进行探索性…

程序猿
2026年5月10日
0000
用户投稿

如何在HTML中插入表单元素_HTML表单控件与输入类型使用指南

HTML表单通过标签构建，包含action和method属性定义数据提交目标与方式，常用input类型如text、password、email等适配不同输入需求，配合label、required、placeholder提升可用性，结合textarea、select、button等控件实现完整交互，是…

程序猿
2026年5月10日
3000
用户投稿

前端缓存策略与JavaScript存储管理

根据数据特性选择合适的存储方式并制定清晰的读写与清理逻辑，能显著提升前端性能；合理运用Cookie、localStorage、sessionStorage、IndexedDB及Cache API，结合缓存策略与定期清理机制，可在保证用户体验的同时避免安全与性能隐患。前端缓存和JavaScript存…

程序猿
2026年5月10日
2000
用户投稿

HTML5网页如何实现手势操作 HTML5网页移动端交互的处理技巧

首先利用原生touch事件实现滑动判断，再通过preventDefault解决滚动冲突，接着引入Hammer.js处理复杂手势，最后通过优化点击区域、避免事件冲突和增加视觉反馈提升体验。在移动端浏览器中，HTML5网页可以通过触摸事件实现手势操作，提升用户体验。虽然原生JavaScript提供了基…

程序猿
2026年5月10日
0000
用户投稿

深入理解 Express.js 中 next() 参数的作用与中间件机制

本文深入探讨 express.js 中间件函数中的 `next()` 参数。它负责将控制权传递给请求-响应周期中的下一个中间件或路由处理程序。文章将详细解释 `next()` 的工作原理、中间件的注册与执行顺序，以及不正确使用 `next()` 可能导致请求挂起的风险，并通过代码示例和实际应用场景，…

程序猿
2026年5月10日
0000
用户投稿

创建指定大小并填充特定数据的Golang文件教程

本文将介绍如何使用Golang创建一个指定大小的文件，并用特定数据填充它。我们将使用 `os` 包提供的函数来创建和截断文件，从而实现快速生成大文件的目的。示例代码展示了如何创建一个10MB的文件，并将其填充为全零数据。掌握这些方法，可以方便地在例如日志系统或磁盘队列等场景中，预先创建测试文件或初始…

程序猿
2026年5月10日
0000
用户投稿

Python命令怎样使用profile分析脚本性能 Python命令性能分析的基础教程

使用Python的cProfile模块分析脚本性能最直接的方式是通过命令行执行python -m cProfile your_script.py，它会输出每个函数的调用次数、总耗时、累积耗时等关键指标，帮助定位性能瓶颈；为进一步分析，可将结果保存为文件python -m cProfile -o ou…

程序猿
2026年5月10日
0000
如何插入查询结果数据_SQL插入Select查询结果方法

使用INSERT INTO…SELECT语句可高效插入数据，通过NOT EXISTS、LEFT JOIN、MERGE语句或唯一约束避免重复；表结构不一致时可通过别名、类型转换、默认值或计算字段处理；结合存储过程可提升可维护性，支持参数化与动态SQL。将查询结果数据插入到另一个表中，可以…

程序猿
2026年5月10日 • 用户投稿
4000
用户投稿

使用 WebCodecs VideoDecoder 实现精确逐帧回退

本文档旨在解决在使用 WebCodecs VideoDecoder 进行视频解码时，实现精确逐帧回退的问题。通过比较帧的时间戳与目标帧的时间戳，可以避免渲染中间帧，从而提高用户体验。本文将提供详细的解决方案和示例代码，帮助开发者实现精确的视频帧控制。在使用 WebCodecs VideoDecod…

程序猿
2026年5月10日
5000
用户投稿

Debian Copilot的社区活跃度如何

debian copilot是codeberg社区维护的ai助手，旨在为debian用户提供服务。尽管搜索结果中没有直接提供关于debian copilot社区支持活跃度的具体数据，但我们可以通过debian社区的整体活跃度和特点来推断其活跃性。 Debian社区的一般情况： Debian拥有详尽的…

程序猿
2026年5月10日
0000