如何使用React.lazy和Suspense进行组件延迟加载

#JAVASCRIPT

如何使用React.lazy和Suspense进行组件延迟加载

向你的粉丝发推文

通过电子邮件发送给朋友

与你的朋友分享

作者:Boris Sever

React 16.6将代码分割带到了一个新的水平。您现在可以在真正需要时加载组件,而无需安装其他库。

什么是代码分裂和延迟加载?

Webpack将代码分割定义为:

“将代码拆分为各种捆绑的技术,然后可以按需加载或并行加载”。[ 来源 ]

另一种说法是:“按需加载或并行加载 ”是延迟加载
与懒惰加载相反的是急切加载。无论您是否使用它,所有内容都会被加载。

为什么我们要使用代码分割和延迟加载?

有时我们必须引入大量代码来覆盖某些功能。此代码可以导入第三方依赖项或自行编写。然后,此代码会影响主包的大小。

下载几MB对于今天的互联网速度来说是小菜一碟。我们仍然需要考虑互联网连接速度慢或使用移动数据的用户。

怎么在React 16.6之前完成?

可能是最流行的React组件延迟加载库 react-loadable.

react-loadable如果您的应用程序在服务器上呈现,reactjs.org仍然建议这一点很重要。[ 来源 ]

react-loadable实际上与React的新方法非常相似。我将在下面的演示中展示这一点。

设置需要什么?

让我们看看reactjs.org对此有何看法:

“如果您正在使用Create React AppNext.jsGatsby或类似的工具,您将拥有一个开箱即用的Webpack设置来捆绑您的应用程序。

如果你不是,你需要自己设置捆绑。例如,请参阅Webpack文档中的“ 安装入门”指南。“ 
- reactjs.org

好的,所以需要Webpack,它处理捆绑包的动态导入。

使用Create React App.And 生成以下演示。在这种情况下,Webpack已经配置好,我们准备好了。

DEMO

对于本演示,我们将使用react-pdfreact-pdf是一个很棒的库,用于在浏览器,移动设备和服务器上创建PDF文件。我们可以在服务器上生成PDF,但如果我们宁愿在客户端进行,则需要一个成本:捆绑大小。

进口成本

我正在使用Visual Studio Code的导入成本扩展来查看所用库的大小。

假设我们的要求是在用户点击按钮时生成PDF文件。

现在,这是一个只有一个用例的简单表单。尝试想象一个巨大的网络应用程序,这是一小部分可能性。也许用户不经常使用此功能。

让我们把自己置身于那种境地。PDF生成并不经常使用,并且为每个页面请求加载整个代码没有意义。

我将尝试展示我们如何开发一个延迟加载的解决方案,如果没有它。

渴望VS懒人加载展示

对于这两种情况,我们将使用一个从中导入依赖项的组件react-pdf并呈现一个简单的PDF文档。

这里没什么了不起的。我们进口PDFViewer DocumentPageTextViewreact-pdf。这些都用在组件的render方法中PDFPreview

PDFPreview只收到一个proptitle。顾名思义,它在新生成的PDF文件中用作标题。

pdfStyles.js看起来像这样:

渴望加载

让我们首先看看没有延迟加载的父组件如何看起来像:

在浏览器中呈现以下视图:

我们一起来看看代码吧:

在第2行,我们导入PDFPreview组件。

在第6行,我们使用默认值初始化状态。name是一个用作PDF文件中标题的字段,而field PDFPreview是一个显示或隐藏的布尔值PDFPreview

现在,让我们跳转到render方法并检查将呈现的内容。

在第19和25行,我们渲染一个输入和一个按钮。当用户输入输入时,name状态会发生变化。

然后,当用户单击“生成PDF”时,showPDFPreview设置为true。该组件重新呈现并显示该PDFPreview组件。

即使我们PDFPreview仅使用用户点击,所有与之相关的代码都包含在应用包中:

这是一个开发环境。在生产中,尺寸将显着缩小。尽管如此,我们还是没有最佳地分割代码。

懒加载

我们只做了很小的改动,让我们通过它们。

第2行替换为:)
const LazyPDFDocument = React.lazy(() => import("./PDFPreview");

让我们看看React文档对React.lazy的看法:

React.lazy采用必须调用动态的函数import()。这必须返回一个Promise解析为具有default包含React组件的导出的模块。
- reactjs.org

在第27行,我们使用Suspense,它必须是延迟加载组件的父级。当showPDFPreview设置为true时,LazyPDFDocument开始加载。

在子组件被解析之前,Suspense显示提供给fallbackprop的任何内容。

最终结果如下:

我们可以看到0.chunk.js的权重显着低于之前,并且按下按钮时加载了4.chunk.js3.chunk.js

结论

每次我们在项目中引入新的依赖项时,我们的责任是评估其成本并检查它对主要组合的影响。

然后我们不得不问这个功能很少被使用,我们可以按需加载它而不会牺牲用户体验。

如果答案是肯定的,那么React.LazySuspense真正帮助我们完成这一任务。

转载文章来源:

https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58

原文地址:https://www.cnblogs.com/xiaoniaohhl/p/11272341.html

时间: 2024-10-12 16:43:25

如何使用React.lazy和Suspense进行组件延迟加载的相关文章

React.lazy和React.Suspense异步加载组件

在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component')); export const johanAsyncComponent = props => ( <React.Susp

React中异步模块api React.lazy和React.Suspense

React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件. 然后应在 React.Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等). 比如: const OtherComponent = React.lazy(() => import('./OtherC

React.lazy 和 react-hot-loader 遇到的两个坑

今天升级了脚手架,重新配置懒加载使用 React.lazy,但是在配置的时候遇到两个坑,搞了很久才解决,在此记录一下. 一是在使用 React.lazy 来进行懒加载的时候,lazy() 里的 import() 组件始终不会进行代码分割,试了各种方法都没解决,而且代码看起来和各种教程都一样的,最后发现是一个 babel 的配置问题... 我的 babel 配置之前配置成了这样: ['@babel/preset-env', { targets: [ 'last 2 version', 'ie >=

【React源码分析】组件通信、refs、key和ReactDOM

React源码系列文章,请多支持:React源码分析1 - 组件和对象的创建(createClass,createElement)React源码分析2 - React组件插入DOM流程React源码分析3 - React生命周期详解React源码分析4 - setState机制React源码分析5 -- 组件通信,refs,key,ReactDOMReact源码分析6 - React合成事件系统 1 组件间通信 父组件向子组件通信 React规定了明确的单向数据流,利用props将数据从父组件传

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

React 深入系列1:React 中的元素、组件、实例和节点

文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) Rea

React的单向数据流与组件间的沟通

今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父节点传递到子节点(通过props). 如果顶层(父级)的某个props改变了,React会重渲染所有的子节点. 刚才我们提到了Props,怎么理解Props呢? Props:  props是property的缩写,可以理解为HTML标签的attribute. 不可以使用this.p

深入解析React中的元素、组件、实例和节点

React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,我就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学的好奇心. 元素 (Element) React 元素其实就是一个简单JavaScript对象,一个React 元素和界面上的一部分DOM对应

HT for Web的HTML5树组件延迟加载技术实现

HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间,让页面的加载更加流畅,增强用户体验. 进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5树组件显示系统文件目录结构. 首先,我们先来设计下服务器,这次Demo的服务器采用Node.js,用到了Node.js的express.so