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 完成渲染。

相关推荐
一直在学习的小白~17 分钟前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
nightunderblackcat1 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
User:你的影子1 小时前
WPF ItemsControl 绑定
开发语言·前端·javascript
LFly_ice2 小时前
学习React-10-useTransition
前端·学习·react.js
知识分享小能手2 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇2 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
wordbaby2 小时前
Hooks的革命:让React的非UI逻辑也能像UI组件一样自由复用和组合
前端·react.js
flower_tomb3 小时前
对浏览器事件机制的理解
前端·javascript·vue.js
超人不会飛3 小时前
仿豆包 H5应用核心模板:用Vue快速复刻大模型对话体验
前端·javascript·vue.js
程序张3 小时前
Vue3+Vite 现代化前端框架👊打破 Chrome 83 内核限制
前端·javascript·vue.js