div 重新加载_使用React的HOC来完成模块的异步加载
原文地址medium.com
在单页面应用的时代,你可以使用React来完成几乎所有的Web应用甚至大型的Web引用。你甚至可以使用React开发一个Facebook。
当前正如你所知,Webpack完成所有的魔法,它将会将你所有的代码放到bundle.js这个文件中,供浏览器使用。这个文件将包含所有组件和所有的依赖。因此,越是庞大的应用,这个文件将会越大。当然,大文件会耗费更多的时间去下载。因此首屏幕加载会非常慢,但是事实上,很多组件都不会出现在用户所浏览的那部分页面上。
最好的实践方案是将这个单一的bundle.js拆分成多个文件,并按需要进行加载。因此,那些不被用户所浏览的页面所包含的的组件,将不会被加载。
为了实现按需加载,是有很多的解决方案的。这里我将分享如何使用HOC来完成这件事情。
什么是HOC?
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
我们可以想象到HOC就是在你的组件外进行一次封装,它会在你的组件创建时注入一些公共状态或者修改一些组件行为。一般一个HOC就是一个非常简单的函数,接收一个组件并返回另一个组件。然后你就能把HOC当成一个非常简单的组件在JSX中应用。我们可以在高阶组件文档 中详细了解高阶组件。
所以,我们要做的就是定义一个HOC,并且在所有需要进行异步加载的组件上应用。
异步组件的HOC
让我们先创建asyncComponent.js这样一个文件来编写我们的HOC代码。同时我比较倾向在工程内建立一个叫“hoc”的目录来存放所有的高阶组件。
让我们看看它的代码吧:
//hoc/asyncComponent.js
如你所见,它就是返回一个函数,这个函数接收另外一个函数为参数并返回一个基类是React Component的匿名类。简单说我们的asyncComponent是一个返回组件的函数。
我们可以看出importComponent是一个函数,它简单的返回我们需要引入的组件,它的代码会像下面这个样子:
const
每次importComponent函数被调用的时候,React都会尝试引入这个组件,它将会自动加载一个包含该组件的chunk.js。
使用asyncComponent
让我们来看看,我们该如何使用这个组件和当我们使用该组件时会发生什么。我们的例子中将在一个函数组件中使用这个高阶组件。
//components/Container.js
在这里,我们定义了一个AsyncButton,而非在DOM中直接中<Button/>组件。我们已经知道我们的asyncComponent是如何定义的,我们也可以猜到AsyncButton将被作为React的组件类型来使用。但是,当这个组件被添加DOM的时候,会发生什么呢?我们就需要到asyncComponent中寻找答案。
很显然,当AsyncButton被挂载到DOM时(参考componentDidMount),它会调用我们的importComponent函数。在这个场景下,它会返回一个Button组件。在import操作完成前,这个地方的DOM将是空的。当缺失的组件完成了下载,它将会作为AsyncButton组件状态添加到AsyncButton组件中,从而触发重新渲染。现在,我们的异步组件将会传递props并渲染Button组件。
好了,我们已经让我们的Button组件在真正被需要使用的时候才被下载和渲染。
异步组件配合路由使用
当我们的应用拥有很多容器组件(例如页面),那就很有必要一开始只加载首先被访问页面,而剩下的页面则按需加载。我们的asyncComponent可以很好的完成这件事,你只需像我们异步加载Button组件那样去就可以了。
这里我们来做个简单的例子。假设我们所有的路由被分拆到不同的文件中,在某个路由文件中只有两个简单的路由。Home页面和用户Profile页面,其中Home页面是首屏页面,而用户Profile不一定会被访问。
import
因此用户的Profile页面,将在被访问的时候加载。
希望你能从这篇博文中学到一些好玩的东西,并且让我们开心的编码吧。
翻译后记:
在非SPA的时代,也有很多异步加载JS文件的方案,例如require.js,但是这些都要使用一些小技巧(修改DOM,增加script标签等)。而随着ECMAScript 6的出现,浏览器正全力的将ES6语法和特性直接在浏览器内实现。而import()函数也是ES的modules规范(动态import)的一部分,这大大的简化了浏览器动态加载JS的难度。
React对大型项目也提出了自己代码分割方案 。这篇文章只是展示下异步加载较为浅显的原理。
翻译水平有限,希望多提出宝贵意见。
div 重新加载_使用React的HOC来完成模块的异步加载相关推荐
- python 按需加载_基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)...
基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 文档转换为PDF有些图片无法完全显示,请移步我的博客查看 完成 ...
- java ztree 异步加载_插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
- java做类似于qq空间动态加载_实现类似微博、QQ空间等的动态加载
微博.QQ空间等的动态加载方式属于滚屏加载技术,获取当前滚动条位置来触发onscroll()函数,向服务器发起请求,将请求得到的新的数据动态加载在页面上 本文利用该原理实现了动态加载,但不是检测当前滚 ...
- android verticalviewpager 下拉刷新 上拉加载_设计规范 | 详解组件控件结构体系:加载类...
设计师在进行APP设计时,往往会更加专注于界面的布局.界面和界面之间怎么跳转.操作反馈,却往往忽略掉一个比较重要的环节,就是APP数据加载中的设计.那么我们怎么处理好界面交互中的加载设计,保证体验无缝 ...
- python调用按键精灵插件_【一日一技】python模块的懒加载
在编写python项目时,通常将需要使用的模块直接通过import关键字导入到项目中,如果后续逻辑变动了,这个模块不需要使用,此时这个模块就白引入了,此时可以利用 import 方法实现模块的懒加载. ...
- android异步加载视频缩略图,swift-如何将视频URL的缩略图异步加载到tableview列表中...
我做了一个演示,可以从视频URL上一堆加载缩略图.现在我想在tableview列表中显示所有加载的缩略图,但是问题是.如果我使用异步的话,tablview会挂起直到下载完所有缩略图线程比我的table ...
- android异步加载视频缩略图,Android 视频缩略图的缓存机制和异步加载
关注微信号:javalearns 随时随地学Java 或扫一扫 随时随地学Java 在这次的工作开发项目中,涉及到一个视频缩略图的视频列表:这个在大家看来,制作视频缩略图就是两行代码就搞定的事.确 ...
- react 实现滚动加载_在React中实现平滑滚动
react 实现滚动加载 Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being ...
- chrome 网页重新加载_在Chrome中为各个网页设置自定义重新加载时间
chrome 网页重新加载 Do you have a webpage that needs to be reloaded every so often or perhaps you have mul ...
最新文章
- Batch Size对神经网络训练的影响
- QIIME 2用户文档. 5粪菌移植分析练习Fecal microbiota transplant (FMT) study
- 电容触摸按键IC AT42QT1070
- html grid插件,miniGrid:轻量级流布局JS插件
- Flutter AppBar 简述
- RSA2013系列(1):中国成为热点
- bzoj 1787 bzoj 1832: [Ahoi2008]Meet 紧急集合(倍增LCA)
- linux命令怎么显示文件某一行或几行内容
- jquery中的trigger和triggerHandler区别
- 无人机路径规划算法_无人机集群——航迹规划你不知道的各种算法优缺点
- CSS颜色代码,二进制颜色代码
- opencv的下载报错解决
- 如何在Linux上安装Oracle客户端连接工具sqlplus
- 前端添加登录验证码 vue
- 工业交换机与普通交换机区别
- 翟菜花:搜索引擎这碗饭,到底能不能吃?
- S01E08-小雅:我在读研期间参与 CHAOSS 开源社区的心路经历
- 关于MTTF、MTBF、MTRF
- imagenet数据集类别标签和对应的英文中文对照表
- [vuex] Do not mutate vuex store state outside mutation handlers.
热门文章
- 3分钟,看回归分析模型怎么做
- SAP Spartacus Enable the unit to allow editing 的信息提示框实现
- 如何对SAP Spartacus支持路由的Component进行单元测试
- SAP Spartacus Organization Unit User页面的实现层级结构
- rxjs里debounceTime operators的用法
- 访问tomcat manager应用遇到的403 access denied错误
- 从SAP Leonardo到SAP Data Intelligence
- Hybris服务器启动日志分析
- How is syntax error in Vue detected
- QDD pricing determination does not trigger - set breakpoint to resolve it