[译] 用惰性加载优化 React 程序

栏目: 服务器 · 发布时间: 5年前

内容简介:翻译:疯狂的技术宅来源:freecodecamp

每日前端夜话 0x6D

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:1333 字

预计阅读时间: 8 分钟

翻译:疯狂的技术宅

来源:freecodecamp

[译] 用惰性加载优化 React 程序

惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要,就不要渲染它们。例如,如果我们有一个要显示的文章列表,开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现(当它们位于视口中或即将在视口上时)。

为什么要用懒惰性载?

大多数时候,我们的用户看不到整个网页,至少在开始时是这样。无论我们的程序 UI 如何构建,用户最初甚至永远都不需要某些组件!

在这些情况下,渲染这些组件不仅会消耗我们程序的性能,还会浪费大量资源(特别是当它们有图片或类似的内容时)。

因此按需加载或呈现这些组件似乎是一个更有效的决策。它可以提高程序的性能,同时也可以为我们节省大量资源。

怎么做?

我们将创建一个示例程序,可以在其中使用惰性加载。首先需要通过以下命令使用 create-react-app 初始化 React 程序:

1create-react-app lazydemo
2cd lazydemo
3npm run start

默认情况下,这可能需要几分钟来进行初始化,并在浏览器的 3000 端口中打开我们的 react 程序。

如果你的电脑上还没有装 create-react-app ,可以用以下命令安装: npm install -g create-react-app

接下来将制作一个列表,显示一些随机的文章。所以先生成一些虚拟数据。在我们项目的 src 文件夹中创建一个名为 data.js 的文件。我刚从这个URL https://jsonplaceholder.typicode.com/posts 复制粘贴了一些 json 响应。你也可以创建自己的虚拟数据。对于本教程,遵循以下格式就足够了:

[译] 用惰性加载优化 React 程序

data.js 格式

让我们用下面的代码替换 App.js 文件的内容:

[译] 用惰性加载优化 React 程序

代码

[译] 用惰性加载优化 React 程序

视图效果

在这里,我们只是用 titlebody 制作了一个 posts 列表。通过一些简单的 CSS 修改,得到下面的视图效果。这是立即渲染的完整列表。如果我们不想在一开始就渲染所有内容,就要用到 lazy loading 。将它安装在我们的项目中:

Source: https://github.com/twobin/react-lazyload

1npm install —-save react-lazyload

现在,让我们通过导入并应用 lazyload 来更新 App.js 文件。

[译] 用惰性加载优化 React 程序

导入并应用lazyload

使用 react-lazyload 是非常简单的,只需用 <LazyLoad ...> ... </ LazyLoad> 包装组件即可。在这里我们用了一个占位符组件 <Loading /> ,它将显示 Loading ... 直到组件加载完成。我们还可以设置 LazyLoad 组件的有效 heightoffset 。你可以在文档中找到更多详细信息:https://github.com/twobin/react-lazyload#height

现在,所有帖子最初都没有渲染。根据视口大小,最初只会对少数几个进行渲染。但是由于当前的内容是文本,除非我们检查并看到 DOM 从 loading 转换为 loaded 时的变化,否则效果很难实现。

为了使延迟加载效果更加明显,让我们在列表中合并图像。我们将用 Lorem Picsum 显示照片。更新的 Post 组件应如下所示:

[译] 用惰性加载优化 React 程序

更新的Post组件
Lorem Picsum网址格式:
https://picsum.photos/id/[image_id]/[width]/[height]

[译] 用惰性加载优化 React 程序

插入图像后的效果

正如我之前所说,图像是网页的数据饥饿组件,在这里我们正在为每个文章加载图像。虽然整个组件是延迟加载的,并且图像也加载了组件,但图像加载有点慢,而且不是那么顺利。因此,我们可以用 LazyLoad 为单个图像创建更好的图像加载体验。

该技术是将非常低质量的图像作为占位符加载,然后加载原始图像。所以,最终的 App.js 是这样:

[译] 用惰性加载优化 React 程序

最终的App.js

现在我们可以用 inspect element open 来“滚动”列表,以查看这些组件在接近视口时如何变化的,还有怎样被渲染并且占位符怎样被实际内容替换。

我们已经完成了,现在我们的 LazyLoad 正在努力工作。这很简单!!!

[译] 用惰性加载优化 React 程序

完成后的效果

这里的图像懒加载不是最好的用例,因为它已经由组件 LazyLoad 处理。但是该技术在我们必须展示大量图像的其他用例中非常有用。试着禁用 Post 组件上的 LazyLoad,但保留图像 LazyLoad,你可以看到它的效果。

源码所在的Github: https://github.com/nowshad-sust/lazydemo

原文:https://medium.freecodecamp.org/how-to-optimize-react-applications-with-lazy-loading-232183e02768

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 ! [译] 用惰性加载优化 React 程序

[译] 用惰性加载优化 React 程序

在公众号内回复“体系”查看高清大图

长按二维码,加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

[译] 用惰性加载优化 React 程序

小手一抖,资料全有。长按二维码关注 前端先锋 ,阅读更多技术文章和业界动态。

[译] 用惰性加载优化 React 程序


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品故事地图

产品故事地图

唐娜·理查(Donna Lichaw) / 向振东 / 机械工业出版社 / 2017-6 / 49.9元

本书一共8章,分为三个部分:第1-2章讲述故事的作用、你该如何运用产品故事来吸引顾客,不是通过讲故事,而是创造故事。第3-5章阐述了不同情境和客户生命周期中的产品故事类型。第6-8章进一步研究如何在战略和策略层面发现、提升、用好你的产品故事。 《产品故事地图》写给那些想要通过创造出顾客喜欢用、经常用而且会推荐给别人用的产品来吸引客户的人。这里的“产品”包括网页、软件、APP、数字化或非数字化......一起来看看 《产品故事地图》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具