React请求机制优化思路

这篇具有很好参考价值的文章主要介绍了React请求机制优化思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

说起数据加载的机制,有一个绕不开的话题就是前端性能,很多电商门户的首页其实都会做一些垂直的定制优化,比如让请求在页面最早加载,或者在前一个页面就进行预加载等等。随着react18的发布,请求机制这一块也是被不断谈起,并且在后续其实也给出了明确的方向。

假如我们页面中有三个组件C1、C2、C3依次嵌套,每个组件中有对应的请求F1、F2、F3,通常大多数人会使用useeffect和state变量来实现数据流的获取,这样就意味着必须在组件加载时才能发起请求,所有数据获取都发生在组件的生命周期中,如下图所示,我们可以将这种获取数据的方式称作瀑布流渲染,但是这种方式有一个问题是,在这种方法中,组件之间的数据获取是按顺序进行的,这实际上意味着它们彼此阻塞,如果组件的层级嵌套很深的话,就会导致页面的加载时间特别长。

为了阻止组件间数据获取的这种顺序阻塞,另一种方法就是在组件加载前可以使用Promise.all获取所有的请求数据,这样在组件加载时就已经获取到所有的数据了。这种方式解决了组件加载顺序阻塞彼此数据流获取的问题,但是也产生了一个新的问题,在请求完成之前页面都会是空白的。

基于第二种先请求后渲染的方式,还可以使用Suspense将请求和渲染并行化,Suspense 可以使得组件可以“等待”某些操作结束后,再进行渲染。而这种方式如果要用到实际项目中,还需要考虑C1、C2、C3对应的请求写在哪里,如果写在组件中,那么加载还是慢的。如果拆分出来,就需要考虑文件拆分、code splitting等工程化问题。

在认真的分析了以上三种方式以后,发现各有优劣,同时基于上述方案,我也提供一个请求优化的思路,首先将请求的JS单独拆分出来打一个文件request.js,在html头部引入request.js并使用async属性让脚本并行执行(如下代码所示),这样既可以保证我们的请求在最开始就能发出,也能不阻塞后续React代码打包的js文件的执行,相当请求和渲染的代码在并行执行。

// html头部引入request.js
<script async src="/js/request.js"></script>

在发送完请求之后,需要将返回的数据注入到React组件中,这部分怎么注入呢?简单的代码示例如下:

// request.js 中请求部分 evt是发布订阅模式的一个实例
window.InitData = {
    data: null,
    on: (msg, fn) => evt.on(msg, e => fn(e)),
    emit: (msg, data) => evt.emit(msg, data),
};

fetch().then(rs => {
    InitData.data = rs;
    InitData.emit("init_data", rs);
    return rs;
});

// index.js react代码逻辑

…….

useEffect(() => {
	if (InitData.data !== null) {
	    // 这里已经获取到了请求的返回值
		doSomething();
	} else {
		InitData.on("init_data", (data) => {			
		    // 利用发布订阅模式获取到数据
			doSomething();
		});
	}
}, []);

…….

总体思路就是在html中最先加载单独打包出来的请求文件并加入async属性使脚本并行执行,将返回的数据挂载到window下或者利用发布订阅模式将数据注入到react组件中。这样其实类似于边请求边渲染的模式,利用提前请求来减少加载的时间。后续也是希望能用工程化的方式去解决数据的请求机制。

未来的话在开发时肯定是更倾向于边请求边渲染的这种模式,在React的官网中也有说到未来计划让Suspense 处理更多的场景,包括获取数据等等,在新发布的React18中Suspense也是支持了服务端渲染,包括近期开源的remix也都在优化请求机制能够让应用更快的加载。也欢迎有兴趣的小伙伴一起来讨论和实践。

作者:京东零售 梁峰峰

来源:京东云开发者社区文章来源地址https://www.toymoban.com/news/detail-654823.html

到了这里,关于React请求机制优化思路的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 请求优化--利用webpack实现根据路由进行懒加载

    使用动态导入语法 :在Vue组件中使用 import() 语法来实现按需加载。例如: 配置Webpack :确保您的Webpack配置中启用了代码分割功能。这通常通过设置 optimization.splitChunks 选项来实现。例如 使用命名块 :如果您想将某个路由下的所有组件都打包在同一个异步块中,可以使用命名

    2024年01月25日
    浏览(40)
  • 【three.js / React-three-fiber】加载3D模型性能优化

    无论是大型虚拟世界还是简单的网站,性能优化都是必要的。 特别是在运用三维模型的情况下,我们需要更加深入的优化。因为 三维模型通常包含大量的数据和复杂的几何形状 ,如果不进行性能优化,浏览器可能会因为负载过重而崩溃。 在本文中,我们将探讨如何在 thre

    2024年02月02日
    浏览(49)
  • 【实战】 六、用户体验优化 - 加载中和错误状态处理(上) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(八)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月12日
    浏览(36)
  • 【实战】 六、用户体验优化 - 加载中和错误状态处理(中) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(九)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月13日
    浏览(43)
  • 【实战】 六、用户体验优化 - 加载中和错误状态处理(下) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月15日
    浏览(36)
  • react使用mobx6动态加载数据

    下载mobx库和mobx-react-lite库 创建store.js 3.在react组件中observer包裹

    2024年02月11日
    浏览(39)
  • 【性能优化】MySQL百万数据深度分页优化思路分析

            一般在项目开发中会有很多的统计数据需要进行上报分析,一般在分析过后会在后台展示出来给运营和产品进行 分页查看 , 最常见的一种就是根据日期进行筛选 。这种统计数据随着时间的推移数据量会慢慢的变大,达到百万、千万条数据只是时间问题。 一、数

    2024年02月15日
    浏览(51)
  • 达梦8数据库性能优化思路浅谈

        作为一名DBA,SQL优化是我们工作中必不可少的技能,在投产的系统中,存在大量的SQL语句需要我们分析和快速做出处理。很是考验我们的经验。这些慢SQL的原因有很多,有SQL编码不规范,设计有缺陷,SQL场景未考虑全面,数据量未评估等,预先需要建立索引的表而未设计建

    2024年02月06日
    浏览(46)
  • MySQL数据库进行性能优化的思路

    对MySQL数据库进行性能优化的思路可以涵盖以下方面: 索引优化: 索引是提高查询性能的关键。确保表中的关键列和经常用于查询条件的列都被适当地创建了索引。可以使用 CREATE INDEX 语句添加索引,或者使用 ALTER TABLE 语句在已有表上添加索引。例如,对于一个用户表中的

    2024年02月06日
    浏览(55)
  • MySQL百万数据深度分页优化思路分析

    一般在项目开发中会有很多的统计数据需要进行上报分析,一般在分析过后会在后台展示出来给运营和产品进行 分页查看 , 最常见的一种就是根据日期进行筛选 。这种统计数据随着时间的推移数据量会慢慢的变大,达到百万、千万条数据只是时间问题。 创建了一张user表,

    2024年02月03日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包