react懒加载lazy

lazy 能够让你在组件第一次被渲染之前延迟加载组件的代码。

const SomeComponent = lazy(load)

参考 

lazy(load) 

在组件外部调用 lazy,以声明一个懒加载的 React 组件:

import { lazy } from 'react';const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

参数 
  • load: 一个返回 Promise 或另一个 thenable(具有 then 方法的类 Promise 对象)的函数。React 不会在你尝试首次渲染返回的组件之前调用 load 函数。在 React 首次调用 load 后,它将等待其解析,然后将解析值的 .default 渲染为 React 组件。返回的 Promise 和 Promise 的解析值都将被缓存,因此 React 不会多次调用 load 函数。如果 Promise 被拒绝,则 React 将抛出拒绝原因给最近的错误边界处理。
返回值 

lazy 返回一个 React 组件,你可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时,尝试渲染它将会处于 暂停 状态。使用 <Suspense> 可以在其加载时显示一个正在加载的提示。


load 函数 

参数 

load 不接收任何参数。

返回值 

你需要返回一个 Promise 或其他 thenable(具有 then 方法的类 Promise 对象)。它最终需要解析为有效的 React 组件类型,例如函数、memo 或 forwardRef 组件。


使用方法 

使用 Suspense 实现懒加载组件 

通常,你可以使用静态 import 声明来导入组件:

import MarkdownPreview from './MarkdownPreview.js';

如果想在组件第一次渲染前延迟加载这个组件的代码,请替换成以下导入方式:

import { lazy } from 'react';const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

此代码依赖于 动态 import(),因此可能需要你的打包工具或框架提供支持。使用这种模式要求导入的懒加载组件必须作为 default 导出。

现在你的组件代码可以按需加载,同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 <Suspense> 边界中来实现:

<Suspense fallback={<Loading />}><h2>Preview</h2><MarkdownPreview /></Suspense>

在这个例子中,MarkdownPreview 的代码只有在你尝试渲染它时才会被加载。如果 MarkdownPreview 还没有加载完成,将显示 Loading。请尝试勾选复选框:

app.js

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));export default function MarkdownEditor() {const [showPreview, setShowPreview] = useState(false);const [markdown, setMarkdown] = useState('Hello, **world**!');return (<><textarea value={markdown} onChange={e => setMarkdown(e.target.value)} /><label><input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />Show preview</label><hr />{showPreview && (<Suspense fallback={<Loading />}><h2>Preview</h2><MarkdownPreview markdown={markdown} /></Suspense>)}</>);
}// 添加一个固定的延迟时间,以便你可以看到加载状态
function delayForDemo(promise) {return new Promise(resolve => {setTimeout(resolve, 2000);}).then(() => promise);
}

Loading.js 

export default function Loading() {return <p><i>Loading...</i></p>;
}

MarkdownPreview.js

import { Remarkable } from 'remarkable';const md = new Remarkable();export default function MarkdownPreview({ markdown }) {return (<divclassName="content"dangerouslySetInnerHTML={{__html: md.render(markdown)}}/>);
}

这个示例代码人为地延迟了加载。在你下次取消选中并重新选中复选框时,Preview 将被缓存,因此不会出现加载状态。要再次查看加载状态,请在示例中单击“Reset”

疑难解答 

我的 lazy 组件状态意外重置 

不要在其他组件 内部 声明 lazy 组件:

import { lazy } from 'react';function Editor() {
// 🔴 Bad: 这将导致在重新渲染时重置所有状态
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
// ...
}

相反,总是在模块的顶层声明它们:

import { lazy } from 'react';// ✅ Good: 将 lazy 组件声明在组件外部
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));function Editor() {
// ...
}

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

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

相关文章

D - United We Stand

思路&#xff1a; &#xff08;1&#xff09;题目要求将集合A划分为B&#xff0c;C两组&#xff0c;使得C中任意数都不是B中的除数 &#xff08;2&#xff09;直观感受&#xff0c;只要让C中数比B中大&#xff0c;则满足条件&#xff0c;不妨只取最大的放入C中&#xff1b; …

Vue之混入(mixin)

在 Vue 中&#xff0c;混入&#xff08;mixin&#xff09;是一个强大的功能&#xff0c;它能够使得相同代码在不同组件中公用&#xff0c;甚至可以将公用代码添加到全局中&#xff0c;能够使得开发更加简洁、规范。所谓混入就是将公用的代码&#xff0c;混入到不同的组件中。 …

windows10下pytorch环境部署留念

pytorch环境部署留念 第一步&#xff1a;下载安装anaconda 官网地址 &#xff08;也可以到清华大学开源软件镜像站下载&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/&#xff09; 我安装的是下面这个&#xff0c;一通下一步就完事儿。 第二步&#x…

Android-Framework 应用间跳转时,提供 Android Broadcast 通知

一、环境 高通865 Android 10 二、情景 应用跳转时,通过广播发送源app的包名和目标app的包名 三、代码实现 frameworks/base/services/core/java/com/android/server/wm/ActivityStarter.java -132,6 132,14 import java.io.PrintWriter;import java.text.DateFormat;imp…

Java中配置RabbitMQ基本步骤

在Java中配置RabbitMQ&#xff0c;需要遵循以下步骤&#xff1a; 1.添加依赖 在项目的pom.xml文件中添加RabbitMQ的Java客户端依赖&#xff1a; <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><versio…

NLP入门——语言结构/语言建模

一、Linguistics 语言学 wordsmorphology 形态学&#xff1a;词的构成和内部结构研究。如英语的dog、dogs和dog-catcher有相当的关系morpheme 语素&#xff1a;最小的语法单位&#xff0c;是最小的音义结合体lexeme 词位&#xff1a;词的意义的基本抽象单位&#xff0c;是一组…

【Web安全】SQL注入攻击几种常见防御手法总结

文章目录 前言一、使用参数化查询二、输入验证和过滤三、使用存储过程四、最小权限原则五、使用ORM框架六、使用准备语句七、使用安全的数据库连接八、避免动态拼接SQL语句九、使用防火墙和入侵检测系统(一)防火墙(二)入侵检测系统(Intrusion Detection System,简称IDS)十、定期…

Scala入门到放弃—02—函数

文章目录 函数方法定义默认参数命名参数可变参数条件语句循环表达式 函数 方法定义 def 方法名(参数: 参数类型): 返回值类型 {//方法体//最后一行作为返回值(不需要使用return) } def max(x: Int, y: Int): Int {if(x > y)xelse y }package org.example object App {de…

2.6.C++项目:网络版五子棋对战之数据管理模块-游戏房间管理模块的设计

文章目录 一、意义二、功能三、作用四、游戏房间类基本框架五、游戏房间管理类基本框架七、游戏房间类代码八、游戏房间管理类代码 一、意义 对匹配成功的玩家创建房间&#xff0c;建立起一个小范围的玩家之间的关联关系&#xff01; 房间里一个玩家产生的动作将会广播给房间里…

基本的爬虫工作原理

爬虫是一种自动化程序&#xff0c;能够模拟人类的浏览行为&#xff0c;从网络上获取数据。爬虫的工作原理主要包括网页请求、数据解析和数据存储等几个步骤。本文将详细介绍爬虫的基本工作原理&#xff0c;帮助读者更好地理解和应用爬虫技术。 首先&#xff0c;爬虫的第一步是…

I/O模型之非阻塞IO

简介 五种IO模型   阻塞IO   非阻塞IO   信号驱动IO   IO多路转接    异步IO 代码书写 非阻塞IO 再次理解IO 什么是IO&#xff1f;什么是高效的IO&#xff1f; 为了理解后面的一个问题&#xff0c;我们首先要再重新理解一下什么是IO 在之前的网络介绍中&#xff…

如何使用Flutter开发执行操作系统shell命令的工具

简介 Flutter是一种由Google开发的移动应用程序开发框架&#xff0c;它允许开发人员使用单个代码库构建高性能、高质量的移动体验。而Android终端命令行工具则允许用户在Android手机上运行类似于Linux的操作系统命令。本文的目的是介绍如何在Flutter应用中开发一个Android终端命…

CUDA学习笔记(二)CUDA简介

本篇博文转载于https://www.cnblogs.com/1024incn/tag/CUDA/&#xff0c;仅用于学习。 CUDA是并行计算的平台和类C编程模型&#xff0c;我们能很容易的实现并行算法&#xff0c;就像写C代码一样。只要配备的NVIDIA GPU&#xff0c;就可以在许多设备上运行你的并行程序&#xf…

什么是马尔科夫随机场?

马尔科夫随机场&#xff0c;也称为马尔可夫网&#xff08;Markov Network&#xff09;&#xff0c;是一种概率图模型&#xff0c;用于表示随机变量之间的依赖关系。它是由若干个随机变量组成的无向图&#xff0c;其中节点代表随机变量&#xff0c;边代表它们之间的相互作用或依…

Node.js的crypto模块 加密

Node.js的crypto模块提供了许多加密和解密功能&#xff0c;包括对称加密、非对称加密、哈希函数等。在本篇文章中&#xff0c;我们将详细介绍Node.js的crypto模块的API、代码注释和举例。 加密和解密 对称加密 对称加密算法使用相同的密钥进行加密和解密&#xff0c;例如AES…

Android 13.0 进入recovery模式(等待用户选择recovery模式界面)进入自动恢复出厂设置模式

1.概述 在13.0的系统产品开发中,由于产品硬件有按钮,按钮执行恢复出厂设置功能,需要实现自动恢复出厂设置的功能,这就需要去掉等待输入recovery模式的相关代码,改成默认恢复出厂模式就实现这个功能了 2.进入recovery模式(等待用户选择recovery模式界面)进入自动恢复出厂设…

浅谈uniapp中开发安卓原生插件

其实官方文档介绍的比较清楚而且详细,但是有时候他太墨迹,你一下子找不到自己想要的,所以我总结了一下开发的提纲,也是为了自己方便下次使用。 1.第一步,下载官方提供的Android的示例工程,然后倒入UniPlugin-Hello-AS工程请在App离线SDK中查找,之后Android studio,编译运行项目…

自编efi文件测试vmware虚拟机如何进入UEFI环境

同事突然让帮忙编一下UEFI&#xff0c;之前完全没有接触过&#xff0c;在此粗鲁记录其过程。 UEFI的开源框架是edk2&#xff0c;开发环境配置起来还是有些麻烦&#xff0c;完全按照文档编译不过&#xff0c;经人帮助总算编译通过&#xff0c;但如何测试又是问题&#xff1b;网…

【T+】畅捷通T+增加会计科目提示执行超时已过期。

【问题描述】 在畅捷通T软件中&#xff0c; 增加会计科目的时候提示&#xff1a; 通过DataTable插入ext扩展表出错:执行超时已过期。 完成操作之前已超时或服务器未响应。 操作已被用户取消。 语句已终止。 【解决方法】 【方法一】 注销用户登录&#xff0c;回到软件登录界面…