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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序云开发详细教程
May 16 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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同时支持GIF、png、JPEG
2006/10/09 PHP
简单的php文件上传(实例)
2013/10/27 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP实现图片压缩
2020/09/09 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python更新列表的方法
2015/07/28 Python
深入浅析Python字符编码
2015/11/12 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python 基础知识之字符串处理
2017/01/06 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python中id函数运行方式
2020/07/03 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python 发送get请求接口详解
2020/11/17 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
PHP面试题集
2016/12/18 面试题
介绍一下OSI七层模型
2012/07/03 面试题
协会周年庆活动方案
2014/08/26 职场文书
幼儿园辞职书
2015/02/26 职场文书
遗愿清单观后感
2015/06/09 职场文书
百万英镑观后感
2015/06/09 职场文书
《称赞》教学反思
2016/02/17 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis