react中Suspense的使用详解


Posted in Javascript onSeptember 01, 2019

关于Suspense的使用,先来看下示例代码

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
 return (
  <div>
   <Suspense fallback={<div>Loading...</div>}>
    <OtherComponent />
   </Suspense>
  </div>
 );
}

OtherComponent是通过懒加载加载进来的,所以渲染页面的时候可能会有延迟,但使用了Suspense之后,可优化交互。

在<OtherComponent />外面使用Suspense标签,并在fallback中声明OtherComponent加载完成前做的事,即可优化整个页面的交互

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
 return (
  <div>
   <Suspense fallback={<div>Loading...</div>}>
    <section>
     <OtherComponent />
     <AnotherComponent />
    </section>
   </Suspense>
  </div>
 );
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
js验证上传图片的方法
May 12 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 #Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
简单分析js中的this的原理
Aug 31 #Javascript
微信小程序image图片加载完成监听
Aug 31 #Javascript
You might like
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python中修改字符串的四种方法
2018/11/02 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python如何实现word批量转HTML
2020/09/30 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
甜点店创业计划书
2014/01/27 职场文书
终止劳动合同协议书
2014/04/14 职场文书
幼儿园安全责任书
2014/04/14 职场文书
建设投标担保书
2014/05/13 职场文书
重点工程汇报材料
2014/08/27 职场文书
先进教师个人总结
2015/02/11 职场文书
护理专业自我评价
2015/03/11 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL