React Suspense的原理

React Suspense组件的作用是当组件未完成加载时,显示 fallback 组件。那么 Suspense 是如何实现的呢?React 的渲染是通过 Fiber 进行的,Suspense 的更新机制也是要围绕 Fiber 架构进行的。Suspense 是由两部分组成,实际 UI 子组件 primary 和 fallback 组件。Suspense 正常的流程是,初始化时显示 fallback 组件,当 primary 组件完成加载之后,显示 primary 组件。这里的关键点就是,如何触发 Primary 组件的显示,这里是要通过一个回调的方法进行更新,当组件完成加载后通知 UI 进行渲染更新。

我们看一下 React 是怎么实现 Suspense,首先通过 Lazy 实现一个 Suspense 效果:

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

Suspense Primary 组件抛出 payload._result,_result 是 promise 对象,组件加载完成之后调用 Resolve。
在这里插入图片描述
在这里插入图片描述
Throw 抛出的异常,在 handleError 方法中进行处理。
在这里插入图片描述
调用 throwException 处理 promise
在这里插入图片描述
下图中, markSuspenseBoundaryShouldCapture 用于显示 fallback,注册ping / retry 监听器用于绑定监听器,这里监听器负责处理 Promise。
在这里插入图片描述
在 attachRetryListener 中加 wakeable 加入 update 队列,wakeable 就是 promise 对象。
在这里插入图片描述

总结

Suspense 组件通过监听 Promise 来判断 Primary 组件是否完成加载,如果加载完成,通过正常的 Fiber Update Queue 完成渲染。

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

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

相关文章

自学指南:必备书籍清单--近100本R语言及生物信息相关书籍

R语言是一种功能丰富的编程语言&#xff0c;数据处理、统计分析是大家所熟知的基本功能。开源免费、活跃的全球社区、灵活可扩展等优点促使R语言飞速发展。目前&#xff0c;CRAN 软件包存储库包含 20446 个可用软件包&#xff0c;涵盖了从生物信息到金融分析等广泛的应用领域。…

spring-boot-devtools热部署功能集成使用

0.参考其他文章 Spring Boot之Spring-devtools热部署&#xff1a;实现快速开发与调试-阿里云开发者社区关于IDEA2022开启热部署没有compiler.automake.allow.when.app.running的解决方案-CSDN博客 1. Spring DevTools简介 Spring DevTools是Spring团队开发的一个模块&#xf…

理解人体手臂七个自由度对应的运动

写本篇的目的在于&#xff0c;我发现很多人理不清人体手臂运动时内收/外展、屈曲/伸展等动作描述的关系&#xff0c;包括我自己也是&#xff01; 我每次要用到的时候都要去查&#xff0c;记不下来&#xff0c;比较麻烦&#xff0c;于是归纳本篇&#xff0c;包含了我本人的理解 …

解析PDF文件中的图片为文本

解析PDF文件中的图片为文本 1 介绍 解析PDF文件中的图片&#xff0c;由两种思路&#xff0c;一种是自己读取PDF文件中的图片&#xff0c;然后用OCR解析&#xff0c;例如&#xff1a;使用PyMuPDF读取pdf文件&#xff0c;再用PaddleOCR或者Tesseract-OCR识别文字。另一种使用第…

Vscode中的行尾序列CRLF/LF不兼容问题

最近开发的的时候&#xff0c;打开项目文件经常会出现爆红错误提示信息&#xff0c;显示如下图&#xff1a; 这东西太烦人了&#xff0c;毕竟谁都不希望在遍地都是爆红的代码里写东西&#xff0c;就像能解决这个问题&#xff0c;根据提示可以知道这是vscode中使用的prettier插件…

图片转pdf,图片转pdf在线转换,在线图片转pdf

图片转PDF&#xff0c;听起来似乎是一个简单的操作&#xff0c;但实际上&#xff0c;它涉及到许多细节和技巧。有时候我们需要将图片转换为PDF格式&#xff0c;以便于分享、打印或保存。那么&#xff0c;如何将图片转换成PDF呢&#xff1f;接下来&#xff0c;我将为您详细介绍几…

Vue3中的常见组件通信(超详细版)

Vue3中的常见组件通信 概述 ​ 在vue3中常见的组件通信有props、mitt、v-model、 r e f s 、 refs、 refs、parent、provide、inject、pinia、slot等。不同的组件关系用不同的传递方式。常见的撘配形式如下表所示。 组件关系传递方式父传子1. props2. v-model3. $refs4. 默认…

零基础MySQL完整学习笔记

零基础MySQL完整学习笔记 1. 基础操作(必须会!)1.1 修改密码(4种方法)1.2 创建新用户1.3 导入数据库 2. SQL四种语言介绍2.1 DDL(数据库定义语言)2.2 DML(数据操纵语言)2.3 DCL(数据库控制语言)2.4 TCL(事务控制语言) 3. 数据库操作3.1 创建数据库3.2 查询数据库3.3 删除数据库…

【ArcGIS微课1000例】0120:ArcGIS批量修改符号的样式(轮廓)

ArcGIS可以批量修改符号的样式,如样式、填充颜色、轮廓等等。 文章目录 一、加载实验数据二、土地利用符号化三、批量修改符号样式四、注意事项一、加载实验数据 订阅专栏后,从私信查收专栏配套的完整实验数据包,打开0120.rar中的土地利用数据,如下图所示: 查看属性表: …

SpringMVC系列十: 中文乱码处理与JSON处理

文章目录 中文乱码处理自定义中文乱码过滤器Spring提供的过滤器处理中文 处理json和HttpMessageConverter<T>处理JSON-ResponseBody处理JSON-RequestBody处理JSON-注意事项和细节HttpMessageConverter<T\>文件下载-ResponseEntity<T\>作业布置 上一讲, 我们学…

python判断语句

目录 布尔类型和比较运算符if语句的基本格式if else 语句if elif else 语句判断语句的嵌套 布尔类型和比较运算符 1、布尔类型 bool布尔类型只有两个结果&#xff1a;真或假 布尔类型的字面量&#xff1a; True 表示真&#xff08;是、肯定&#xff09; False 表示假&#x…

【论文精读】ViM: Out-Of-Distribution with Virtual-logit Matching 使用虚拟分对数匹配的分布外检测

文章目录 一、文章概览&#xff08;一&#xff09;问题来源&#xff08;二&#xff09;文章的主要工作&#xff08;三&#xff09;相关研究 二、动机&#xff1a;Logits 中缺失的信息&#xff08;一&#xff09;logits&#xff08;三&#xff09;基于零空间的 OOD 评分&#xf…

[leetcode]add-strings 字符串相加

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string addStrings(string num1, string num2) {int i num1.length() - 1, j num2.length() - 1, add 0;string ans "";while (i > 0 || j > 0 || add ! 0) {int x i > 0 ? num1[i…

msvcp120.dll丢失怎么办,找不到msvcp120.dll的多种解决方法

最近&#xff0c;我在运行一个程序时遇到了一个错误&#xff0c;系统提示找不到msvcp120.dll文件&#xff0c;无法继续执行代码。这让我感到非常困扰&#xff0c;因为这个问题导致我无法正常运行这个程序。经过一番搜索和尝试&#xff0c;我找到了几种修复这个问题的方法&#…

pdf转图片转换器,pdf转图片的工具

在日常的工作和学习中&#xff0c;我们经常会遇到需要将PDF文件转换为图片格式的情况。那么&#xff0c;如何才能将PDF格式转换为图片格式呢&#xff1f;今天&#xff0c;我将为大家介绍几种简单易用的方法&#xff0c;帮助大家轻松实现PDF转图片。 打开“轻云pdf处理官网网站”…

WEB界面上使用ChatGPT

&#xff08;作者&#xff1a;陈玓玏&#xff09; 开源项目&#xff0c;欢迎star哦&#xff0c;https://github.com/tencentmusic/cube-studio 随着大模型不断发展&#xff0c;现在无论写代码&#xff0c;做设计&#xff0c;甚至老师备课、评卷都可以通过AI大模型来实现了&…

后端实现预览pdf,mp4,图片

PDF预览 /*** pdf预览* param response*/RequestMapping(value "/preview")public void showPdf(HttpServletResponse response) {try {//String filePath this.getClass().getClassLoader().getResource("../../static/pdf/readme.pdf").getPath();Stri…

线程池概念、线程池的不同创建方式、线程池的拒绝策略

文章目录 &#x1f490;线程池概念以及什么是工厂模式&#x1f490;标准库中的线程池&#x1f490;什么是工厂模式&#xff1f;&#x1f490;ThreadPoolExecutor&#x1f490;模拟实现线程池 &#x1f490;线程池概念以及什么是工厂模式 线程的诞生是因为&#xff0c;频繁的创…

【Godot4自学手册】第四十二节实现拖拽进行物品交换和数量叠加

这一节我们主要学习背包系统中的物品拖拽后&#xff0c;物品放到新的位置&#xff0c;或交换物品位置&#xff0c;如果两个物品属于同一物品则数量相加。具体效果如下&#xff1a; 一、修改item.tscn场景 给item.tscn场景的根节点Item添加Label子节点&#xff0c;命名为Numv…

[RPI4] 树莓派4b安装istoreos及使用 -- 1. 系统安装

最近在研究家庭智能化的一些东西,其中包括网络,智能家居等一系列内容,然后看过的资料有的想再回来看的时候就找不到了,然后就想着开这么一个系列,做一些记录,先从智能家居开始吧。 1 安装istoreos系统 iStoreOS 目标是提供一个人人会用的路由兼轻 NAS 系统,不管是作为路…