React Suspense的原理

news2024/11/18 7:46:47

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.coloradmin.cn/o/1858695.html

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

相关文章

Go 语言学习笔记之字典 Map

Go 语言中的字典 Map 大家好&#xff0c;我是码农先森。 概念 在 Go 语言中&#xff0c;字典被称为 map&#xff0c;它是一种无序的集合&#xff0c;用于存储键值对。每个键在 map 中必须是唯一的&#xff0c;并且对应一个值。map 是一种非常常用的数据结构&#xff0c;用于…

iptables(6)扩展匹配条件--tcp-flags、icmp

简介 前面我们已经介绍了不少的扩展模块,例如multiport、iprange、string、time、connlimit模块,但是在tcp扩展模块中只介绍了tcp扩展模块中的”--sport”与--dport”选项,并没有介绍”--tcp-flags”选项,那么这篇文章,我们就来认识一下tcp扩展模块中的”--tcp-flags”和i…

毫米波移动通信系统中的波束赋形— 基于码本的波束训练

基于码本的波束训练算法该方法在收发端都配置波束矢量的码本&#xff0c;通过波束搜索的方式发现最优的波束方向为了加快波束搜索的速度&#xff0c;往往采用逐步缩小搜索范围的方式加快搜索&#xff0c;可以将搜索算法的时间复杂度从O(N)降低到O(logN)&#xff0c;其中N表示码…

spring-gateway include-expression 配置说明

在开发过程中遇到的一些配置问题&#xff0c;记录下来以供参考 spring-gateway版本是2.2.9-release,使用的spring cloud dependence 是 Hoxton.SR12 在依赖eureka 服务发现并自动将发现服务器加入到router中的时候&#xff0c;需要指定对应的服务进行添加&#xff0c;根据文档…

NtripShare2024年第二季度主要技术进展

NtripShare Cloud GNSS解算云平台方面 1、解算引擎增加根据卫星多路径效应自动剔除卫星的算法。 2、解算引擎增加解算时间段限制&#xff08;发现贵州某地在晚12点周期性效果变差&#xff09;。 3、增加2000坐标至地方坐标系转换的支持(七参数、四参数、TGO高程拟合&#x…

GitHub星标破千!斯坦福大学的284个机器学习小抄(漫画中文版)

说到人工智能必然要了解机器学习&#xff0c;从信息化软件&#xff0c;到电子商务&#xff0c;然后到高速发展互联网时代&#xff0c;到至今的云计算、大数据等&#xff0c;渗透到我们的生活、工作之中&#xff0c;在互联网的驱动下&#xff0c;人们更清晰的认识和使用数据&…

第一百二十三节 Java面向对象的设计 - Java接口继承

Java面向对象的设计 - Java接口继承 接口可以从另一个接口继承。与类不同&#xff0c;接口可以从多个接口继承。 interface Singer {void sing();void setRate(double rate);double getRate(); } interface Writer {void write();void setRate(double rate);double getRate();…

【代码随想录刷题】day02——977.有序数组的平方 ,209.长度最小的子数组 ,59.螺旋矩阵II

977.有序数组的平方 方法一&#xff1a;暴力法 class Solution { public:vector<int> sortedSquares(vector<int>& nums) {// 暴力法for(int i 0; i < nums.size(); i){nums[i] * nums[i];}sort(nums.begin(), nums.end());return nums;} };方法二&#…

思考题:相交的几何图形

给定不超过 26 个几何图形&#xff0c;每个图形都有一个唯一大写字母作为其编号。 每个图形在平面中的具体位置已知&#xff0c;请你判断&#xff0c;对于每个图形&#xff0c;有多少个其他图形与其存在交点。 在判断交点时&#xff0c;只考虑边与边相交的情况&#xff0c;如…

探秘神经网络激活函数:Sigmoid、Tanh和ReLU,解析非线性激活函数的神奇之处

引言 在神经网络中&#xff0c;激活函数扮演着至关重要的角色。它们赋予神经网络非线性的能力&#xff0c;使得网络具备学习和表示复杂函数关系的能力。本文将详细解析三种常见的激活函数&#xff1a;Sigmoid、Tanh和ReLU&#xff0c;揭开它们在神经网络中的奥秘。无论你是初学…

【IDEA】扩大虚拟机栈空间操作

输入命令参数-Xss 要更改的空间大小

【转载】Purple Pi OH OpenHarmony开发板使用体验+原创跨屏输入应用

本文原作者&#xff1a;westinyang&#xff0c;本号已被授权仅转载 一、开发板介绍 1.1 产品概述 Purple Pi OH智能主板&#xff0c;配备Rockchip RK3566四核Cortex-A55处理器&#xff0c;主频最高1.8GHz&#xff0c;LPDDR4/LPDDR4X 默认2GB &#xff0c;最大可以支持8GB内存…

华芯微特SWM34-使用定时器捕获快速解码EV1527编码

在无线应用领域&#xff0c;很多433Mhz和315Mhz的遥控器&#xff0c;红外探测器&#xff0c;门磁报警器&#xff0c;无线门铃等都使用EV1527编码格式来发射数据。发射和接收均有对应的RF芯片完成&#xff0c;而且成本极低&#xff08;目前市场价3毛钱不到&#xff09;。接收芯片…

centos7 xtrabackup mysql 基本测试(5)mysql 建立 测试 数据库及内容

centos7 xtrabackup mysql 基本测试&#xff08;5&#xff09;mysql 建立 测试 数据库及内容 登录 mysql -u etc -p 1234aA~1创建数据库 名字是company show databases ; create database company;在 company里面 创建表employee use company; DROP TABLE IF EXISTS employ…

【Mysql】数据库事务-手动提交

数据库事务 ** 什么是事务** 事务是一个整体,由一条或者多条SQL 语句组成,这些SQL语句要么都执行成功,要么都执行失败, 只要有一条SQL出现异常,整个操作就会回滚,整个业务执行失败。 比如: 银行的转账业务,张三给李四转账500元 , 至少要操作两次数据库, 张三 -500, 李四 50…

猫头虎分享已解决Bug: Class Not Found Exception: java.lang.ClassNotFoundException

猫头虎分享已解决Bug: Class Not Found Exception: java.lang.ClassNotFoundException &#x1f42f; 摘要 &#x1f4c4; 大家好&#xff0c;我是猫头虎&#xff0c;一名专注于后端技术的博主。在日常开发中&#xff0c;我们经常会遇到各种各样的Bug&#xff0c;其中Class N…

【昇思初学入门】第六天打卡

函数式自动微分 学习心得 反向传播&#xff1a;神经网络在训练时&#xff0c;会使用一个叫做“反向传播”的方法。这个方法的基本思路是这样的&#xff1a;首先&#xff0c;神经网络会做出一个预测&#xff08;我们称之为“logits”&#xff09;&#xff0c;然后我们将这个预…

playwright录制脚本原理

Paywright录制工具UI 在上一篇博客中介绍了如何从0构建一款具备录制UI测试的小工具。此篇博客将从源码层面上梳理playwright录制原理。当打开playwright vscode插件时&#xff0c;点击录制按钮&#xff0c;会开启一个新浏览器&#xff0c;如下图所示&#xff0c;在新开浏览器页…

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

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

Android Media Framework(七)MediaCodecService

Android引入Treble架构后&#xff0c;OpenMAX框架以HIDL Service的形式为System分区提供服务&#xff0c;本文将探讨该服务是如何启动&#xff0c;服务提供了什么内容&#xff0c;以及服务是如何被应用层所使用的。 1 概述 在Android的Treble架构中&#xff0c;为了确保系统的…