0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

React请求机制优化思路介绍

OSC开源社区 来源:OSCHINA 社区 2023-08-22 10:04 次阅读

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

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

fd03a43e-4014-11ee-ac96-dac502259ad0.png

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

fd24d5c8-4014-11ee-ac96-dac502259ad0.png

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

fd4ba2c0-4014-11ee-ac96-dac502259ad0.png

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

// html头部引入request.js

在发送完请求之后,需要将返回的数据注入到 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 组件中。这样其实类似于边请求边渲染的模式,利用提前请求来减少加载的时间。






审核编辑:刘清

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HTML
    +关注

    关注

    0

    文章

    277

    浏览量

    33879
  • 数据加载
    +关注

    关注

    0

    文章

    6

    浏览量

    6279

原文标题:React请求机制优化思路

文章出处:【微信号:OSC开源社区,微信公众号:OSC开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    Linux开发_采用线程处理网络请求

    介绍Linux下网络编程、线程编程,select机制,利用子线程响应TCP服务器的请求
    的头像 发表于 09-17 15:21 801次阅读

    优化React开发体验

    从零构建React开发环境(四)
    发表于 04-01 16:00

    React环境配置介绍

    React 学习篇(二)
    发表于 04-03 11:34

    React创建应用

    React 学习篇(一)
    发表于 04-21 07:13

    React路由状态如何管理

    React 路由状态管理总结
    发表于 05-19 07:11

    React优势,react学习笔记分享

    1、React优势react适合大型团队的开发,每个人负责自己的组件,开发完毕之后由react渲染到前端页面
    发表于 10-27 06:53

    GPRS优化思路总结报告

    GPRS优化思路总结报告:一、概述 2二、无线优化思路 2三、(E)GPRS网络资源容量分析优化 53.1、
    发表于 07-27 21:29 26次下载

    GPRS优化思路总结报告_李青春

    (E)GPRS 优化思路通信网络优化,GSM上网,PDCH,EDGEGPRS.
    发表于 01-14 15:21 4次下载

    详谈 Vue 和 React 的八大区别

    为什么 React 不精确监听数据变化呢 ?这是因为 Vue 和 React 设计理念上的区别, Vue 使用的是可变数据,而React更强调数据的不可变。所以应该说没有好坏之分,Vue更加简单,而
    的头像 发表于 09-15 15:27 8052次阅读
    详谈 Vue 和 <b class='flag-5'>React</b> 的八大区别

    React-in-patterns React开发设计模式/技术列表

    react-in-patterns.zip
    发表于 04-19 11:28 0次下载
    <b class='flag-5'>React</b>-in-patterns <b class='flag-5'>React</b>开发设计模式/技术列表

    React Sight React组件层次可视化工具

    ./oschina_soft/React-Sight.zip
    发表于 05-18 15:36 4次下载
    <b class='flag-5'>React</b> Sight <b class='flag-5'>React</b>组件层次可视化工具

    React Native for Windows使用React构建原生Windows应用

    ./oschina_soft/react-native-windows.zip
    发表于 06-22 10:06 0次下载
    <b class='flag-5'>React</b> Native for Windows使用<b class='flag-5'>React</b>构建原生Windows应用

    简要介绍React和Vue

    以上代码描述了React怎么在指定的页面元素(id为id01的div元素)中改变相应的字符串内容(从"Hello World!"到"Hello John Doe!")。其中第5行的ReactDOM.render()是React JS库提供的一个方法
    发表于 07-14 09:32 965次阅读

    Web前端性能优化思路

    本文旨在整理常见Web前端性能优化思路,可供前端开发参考。因为力求精简,限于篇幅,所以并未详述具体实施方案。 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要
    的头像 发表于 10-18 14:21 933次阅读
    Web前端性能<b class='flag-5'>优化</b><b class='flag-5'>思路</b>

    关于“React和Vue该用哪个”

    React 有函数式组件的和类组件两种写法,鉴于 class 写法较老,且这种写法不利于构建工具的 Tree-shaking ,可能导致构建产物体积增加,而函数式组件的 hooks 写法更符合未来的潮流 , 所以类组件在此也不做详细的介绍,只选取函数式组件写法的
    的头像 发表于 11-10 10:15 850次阅读