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

相关推荐
秋雨凉人心4 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
小王爱吃月亮糖5 小时前
C++的23种设计模式
开发语言·c++·qt·算法·设计模式·ecmascript
哥谭居民00016 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)
javascript·vue.js·typescript·npm·node.js·css3
踢足球的,程序猿6 小时前
Android native+html5的混合开发
javascript
前端没钱7 小时前
探索 ES6 基础:开启 JavaScript 新篇章
前端·javascript·es6
一條狗8 小时前
隨筆20241226 ExcdlJs 將數據寫入excel
react.js·typescript·electron
一条不想当淡水鱼的咸鱼8 小时前
taro中实现带有途径点的路径规划
javascript·react.js·taro
土豆炒马铃薯。8 小时前
【Vue】前端使用node.js对数据库直接进行CRUD操作
前端·javascript·vue.js·node.js·html5
GISer_Jing8 小时前
React基础知识(总结回顾一)
前端·react.js·前端框架
温轻舟9 小时前
前端开发 -- 自动回复机器人【附完整源码】
前端·javascript·css·机器人·html·交互·温轻舟