源码级解析，搞懂 React 动态加载（中） —— React.lazy + Suspense
最新回答
爱生活爱***
2023-12-20 08:41:08
从React 16.6.0开始，原生提供了code-splitting和组件动态加载功能，引入了lazy函数，并支持通过Suspense和ErrorBoundary进行错误处理和加载前的临时内容展示。让我们来看如何借助React.lazy和Suspense来实现组件的动态加载，并通过源码剖析理解其工作流程。
例如，你可以将之前Bar组件的加载方式转换为React.lazy和Suspense的形式，如设置一个2秒的延迟和加载中的提示文字"Loading..."。关键在于，React.lazy需要在Suspense组件的包裹下工作，它会在组件未加载完成时展示fallback内容。
源码解析React.lazy的逻辑，我们从v18.2.0版本开始。React.lazy返回的LazyComponent对象，包含一个初始化函数，其核心逻辑是：当Suspense组件开始协调时，它会先挂载fallback组件，然后等待lazy函数返回的Promise解析，加载真正的组件。
在Fiber架构下，React.lazy与Suspense的协同工作更为复杂。首次协调时，Suspense会将primary组件挂载并等待加载，如果Promise未解析，会通过错误处理机制进入第二轮协调，加载fallback。第二次协调时，primary组件完成加载后，Suspense会切换到primary组件的渲染。
整个过程涉及协调、commit两个阶段，涉及到工作单元的标记、状态更新、回调函数的绑定等步骤。虽然看起来复杂，但通过流程图和源码分析，我们可以理解其背后的逻辑。
总结来说，React.lazy与Suspense的结合，利用了错误处理机制和协调机制，提供了动态加载的灵活处理方式。在接下来的文章中，我们将探讨另一种流行的动态加载方案@loadable/component，以深化对动态加载技术的理解。
参考资料：React官方文档，React源码解析系列以及其他技术文章。
热门标签
