React 之 Suspense和lazy

一. Suspense

参考链接:https://react.docschina.org/reference/react/Suspense

suspense:n. 焦虑、悬念

<Suspense> 允许你显示一个退路方案(fallback)直到它的所有子组件完成加载。

<Suspense fallback={<Loading />}><SomeComponent />
</Suspense>

二. lazy

lazy的实现类似于如下asyncComponent的实现代码:

function asyncComponent(importComponent) {class AsyncComonent extends React.Component {constructor(props) {super(props);this.state = {com: null}}async componentDidMount() {const { default: com } = await importComponent();this.setState({com});}render() {const C = this.state.com;return C ? <C ...{this.props} /> : null;}}}
const routers = {demo: {path: '/homepage',renderComponent: asyncComponent(() => import('../homepage/main.jsx'))}
}

:使用import()动态导入后返回一个promise,但是通过lazy包裹后可以得到一个直接渲染的组件。
在这里插入图片描述

参考链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/95233.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目根据word模版导出word文件

一、安装依赖 //1、docxtemplaternpm install docxtemplater pizzip -S//2、jszip-utilsnpm install jszip-utils -S//3、pizzipnpm install pizzip -S//4、FileSaver npm install file-saver --save二、创建word模版 也就是编辑一个word文档&#xff0c;文档中需要动态取值的…

基于chatgpt动手实现一个ai_translator

动手实现一个ai翻译 前言 最近在极客时间学习《AI 大模型应用开发实战营》&#xff0c;自己一边跟着学一边开发了一个进阶版本的 OpenAI-Translator&#xff0c;在这里简单记录下开发过程和心得体会&#xff0c;供有兴趣的同学参考&#xff1b; ai翻译程序 版本迭代 在学习…

Spring-MVC的数据响应-19

在访问服务端MVC的时候&#xff0c;这个controller层进行相应操作之后 他要做两件事&#xff1a;页面跳转和返回字符串&#xff0c;在做完这些操作之后&#xff0c;我们一般进行页面展示:排除页面展示之外&#xff0c;有些需求可能直接回写给我们一些数据&#xff1a; 页面跳…

spring bean创建总览 1

1 开始 这是一个总图 下边慢慢看 我们最基础的写的方式就是xml的方式去写 像这样&#xff0c; 而我们会通过applicationContext的方式去获得我们的bean &#xff0c;我其中一篇博客就写到了applicationContext他的父类就是beanFactory 但是中间的是怎么样处理的呢&#xff1f…

springboot引入druid解析sql

一、前言 在开发中&#xff0c;有时我们可能会需要获取SQL中的表名&#xff0c;那么因为不同的数据源类型SQL会存在部分差异&#xff0c;那么我们就可以使用alibaba 的druid包实现不同的数据源类型的sql解析。 二、引入相关maven依赖 <dependency><groupId>com.a…

MySQL表的操作

MySQL表的操作 创建表查看表结构的详细信息修改表结构增加表结构属性删除表结构表结构的修改 删除表结构 创建表 语法: create table table_name( field1 datatype [comment xxxxx], field2 datatype [comment xxxxx], field3 datatype [comment xxxxx]) [charsetxxx][collatey…

idea 转换为 Maven Project 的方法

选项&#xff1a; Add as Maven Project

一、进入sql环境,以及sql的查询、新建、删除、使用

1、进入sql环境 》》》mysql -u root -p 》》》输入密码 2、sql语言的分类 3、注意事项&#xff1a; 4、基础操作&#xff1a; &#xff08;1&#xff09;查询所有数据库&#xff1a; show databases; 运行结果&#xff1a; &#xff08;2&#xff09;创建一个新的数据库&…

ceph数据分布

ceph的存储是无主结构&#xff0c;数据分布依赖client来计算&#xff0c;有两个条主要路径。 1、数据到PG 2、PG 到OSD 有两个假设&#xff1a; 第一&#xff0c;pg的数量稳定&#xff0c;可以认为保持不变&#xff1b; 第二&#xff0c; OSD的数量可以增减&#xff0c;OSD的…

我能“C”——实用的调试技巧

什么是bug&#xff1f; 调试是什么&#xff1f;有多重要&#xff1f; debug和release的介绍。 windows环境调试介绍。 一些调试的实例。 如何写出好&#xff08;易于调试&#xff09;的代码。 编程常见的错误。 1.什么是bug&#xff1f; 世界上第一个bug是程序员赫柏发现的。 …

中大许少辉博士《乡村振兴战略下传统村落文化旅游设计》中国建筑工业出版社八一付梓。

中大许少辉博士《乡村振兴战略下传统村落文化旅游设计》中国建筑工业出版社八一付梓。

Django之定时任务--apscheduler

Django--定时任务apscheduler的使用 apscheduler定时任务的使用1、安装包2、配置settings.py3、在manage.py的文件同级目录下创建文件scheduler.py4、在项目的urls.py中调用这个定时计划5、然后启动项目 python manage.py runserver,在admin中查看就能看到你的定时任务及执行的…

【编程二三事】ES究竟是个啥?

在最近的项目中&#xff0c;总是或多或少接触到了搜索的能力。而在这些项目之中&#xff0c;或多或少都离不开一个中间件 - ElasticSearch。 今天忙里偷闲&#xff0c;就来好好了解下这个中间件是用来干什么的。 ES是什么? ​ ES全称ElasticSearch&#xff0c;是个基于Lucen…

【使用群晖远程链接drive挂载电脑硬盘】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

springBoot是如何实现自动装配的

目录 1 什么是自动装配 2 Spring自动装配原理 2.1 SpringBootConfiguration ​编辑 2.2 EnableAutoConfiguration 2.2.1 AutoConfigurationPackage 2.2.2 Import({AutoConfigurationImportSelector.class}) 2.3 ComponentScan 1 什么是自动装配 自动装配就是将官方写好的的…

Redis哨兵模式搭建

Redis哨兵模式搭建 在Redis主从复制这篇文章中我们分析了主从复制的特点&#xff0c;其中一个问题就是主机宕机后需要手动调整&#xff0c;修改从机 为主机&#xff0c;不仅不利于迅速恢复生产场景&#xff0c;还会增加人力成本。哨兵模式的出现是就是为了解决我们主从复制模…

比ChatGPT更强的星火大模型V2版本发布!

初体验 测试PPT生成 结果&#xff1a; 达到了我的预期&#xff0c;只需要微调就可以直接交付&#xff0c;这点比ChatGPT要强很多. 测试文档问答 结果&#xff1a; 这点很新颖&#xff0c;现在类似这种文档问答的AI平台收费都贵的离谱&#xff0c;星火不但免费支持而且效果也…

[oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

字体样式 回忆上次内容 \033 xm 可以改变字体样式 0m - 10m 之间设置的 都是字体效果 0m 复原1m 变亮2m 变暗 从3m到10m 又是什么效果 呢&#xff1f;&#xff1f; 真的可以 让文字 blink闪烁吗&#xff1f;&#x1f441; 3m 3m 实现斜体字的效果 4m 4m 对应着下划线 控…

16.5.3 【Linux】SELinux 三种模式的启动、关闭与观察

并非所有的 Linux distributions 都支持 SELinux 的&#xff0c;所以你必须要先观察一下你的系统版本为何。 目前 SELinux 依据启动与否&#xff0c;共有三种模式&#xff0c;分别如下&#xff1a; enforcing&#xff1a;强制模式&#xff0c;代表 SELinux 运行中&#xff0c;…

Es、kibana安装教程-ES(二)

上篇文章介绍了ES负责数据存储&#xff0c;计算和搜索&#xff0c;他与传统数据库不同&#xff0c;是基于倒排索引来解决问题的。Kibana是es可视化工具。 分布式搜索ElasticSearch-ES&#xff08;一&#xff09; 一、ElasticSearch安装 官网下载地址&#xff1a;https://www…