在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件。

例如:

const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component'));

export const johanAsyncComponent = props => (
<React.Suspense fallback={<Spinner />}>
<johanComponent {...props} />
</React.Suspense>
);

对比react-loadable,React.Suspense还是有一些不足。

1. 加载组件缺少delay参数,不能解决请求快速完成时的"闪烁"问题(即使加载模块只需要几毫秒的时间, fallback也会被执行,就上述代码来说,也就是 Spinner 会闪烁一下),需要自己封装

2. 没有内置的加载错误处理方法,需要自己去处理

3. react-loadable有预加载支持,React.Lazy没有

仍然推荐使用react-loadable来异步加载组件,暂时不用React.Suspense。

参考:https://blog.csdn.net/roamingcode/article/details/85946380

React.lazy和React.Suspense异步加载组件的更多相关文章

  1. Vue中router路由异步加载组件-优化性能

    何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...

  2. react异步加载组件

    1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...

  3. vue-router异步加载组件

    export default { routes: [ { path: '/fund', name: 'FundManagement', component: function(resolve) { r ...

  4. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  5. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  6. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

  7. Android批量图片加载经典系列——采用二级缓存、异步加载网络图片

    一.问题描述 Android应用中经常涉及从网络中加载大量图片,为提升加载速度和效率,减少网络流量都会采用二级缓存和异步加载机制,所谓二级缓存就是通过先从内存中获取.再从文件中获取,最后才会访问网络. ...

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

    React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 R ...

  9. react中使用antd按需加载(第一部)

    什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需 ...

随机推荐

  1. ShortKey – Visual Studio/VS Code etc.

    Switching between .h and .cppIn Visual Studio 2013 and later :there is a default keyboard shortcut f ...

  2. driver.implicitly_wait()与time.sleep()的区别

    implicitly_wait(5)属于隐式等待,5秒钟内只要找到了元素就开始执行,5秒钟后未找到,就超时: time.sleep(5)表示必须等待5秒定位: 如何灵活运用这两种方式: 当某个页面元素 ...

  3. Linux查看打日志文件

    1.如果文件比较小的话,使用vim直接查看,如果文件比较大的话,使用vim会直接卡主 2.如果想要查看正在滚动的日志文件.这个命令可以查看大文件. tail -f file Ctrl+c 终止tail ...

  4. 项目Beta冲刺 总结

    课程: 软件工程1916|W(福州大学) 作业要求: 项目Beta冲刺 团队名称: 火鸡堂 作业目标: 总结 火鸡堂 队员学号 队员姓名 博客地址 备注 221600111 彼术向 http://ww ...

  5. 查看spark on yarn的日志和程序状态的方法

    转自:https://blog.csdn.net/high2011/article/details/52132646 一.在命令行使用命令查看 (1)查看日志:yarn logs -applicati ...

  6. 前端知识--mulline框架,返回到前一个页面,并且刷新前一个页面

    最近在写项目的时候,遇到了这样一个问题,在第二页面修改完了数据之后,点击返回按钮的时候,第一个页面要返显出第一个页面的数据,这想想其实也不是很难,但是,难就难在,这两个页面是同时打开的.关闭了一个页面 ...

  7. 创建Maven之后,Java包下无法直接创建servlet的原因:

    ---恢复内容开始--- 没有导入servlet-api的依赖,导入完依赖就可以直接创建了   依赖如下:   <dependency> <groupId>javax.serv ...

  8. 【每天学一点Linux】快速清除文件内容

    linux几种快速清空文件内容的方法 几种快速清空文件内容的方法: $ : > filename #其中的 : 是一个占位符, 不产生任何输出. $ > filename $ echo “ ...

  9. 基于docker-compose部署 简单nsq 集群

    主要目的是搭建一个测试环境,同时使用了nodejs 客户端sdk nsq 简单了解 nsqd:一个负责接收.排队.转发消息到客户端的守护进程 nsqlookupd:管理拓扑信息并提供最终一致性的发现服 ...

  10. json-server模拟服务器API

    一.npm安装 npm install --global json-server 二.使用:创建一个json数据文件,比如: { "students": [{ "id&q ...