React框架在构建高性能前端应用时有哪些最佳实践？

本文共计4483个文字，预计阅读时间需要18分钟。

目录+Suspense基本应用+Suspense原理+基本流程+源码解读+-+primary组件源码解读+-+异常捕获+源码解读+-+添加promise回调+源码解读-Suspense首次渲染+primary组件加载完成前的渲染+-

目录

• Suspense 基本应用
• Suspense 原理
• 基本流程
• 源码解读 - primary 组件
• 源码解读 - 异常捕获
• 源码解读 - 添加 promise 回调
• 源码解读-Suspense
• 首次渲染
• primary 组件加载完成前的渲染
• primary 组件加载完成时的渲染
• 利用 Suspense 自己实现数据加载

Suspense 基本应用

Suspense 目前在 react 中一般配合 lazy 使用，当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成。其中 lazy 接受类型为 Promise<() => {default: ReactComponet}> 的参数，并将其包装为 react 组件。