React Lazy 的实现原理

React.lazy 是 React 16.6 引入的一个特性，用于 代码分割（Code Splitting） 和 按需加载（Lazy Loading） 组件。它允许你定义一个动态加载的组件，这个组件只有在需要的时候才会被加载，从而减少初始加载时间，优化 FCP ， 提高应用性能。

React.lazy 的实现原理

React.lazy

的核心是使用

JavaScript

的动态 import() 语法，这种语法会返回一个

Promise

，并且在需要的时候才会加载模块。以下是

React.lazy

的基本实现原理：

1. 动态导入组件：

React.lazy

接受一个函数作为参数，这个函数使用 import() 语法动态导入组件。例如：

const LazyComponent = React.lazy(()=>import('./MyComponent'));

2. 返回一个 React.Component：

React.lazy

返回一个新的 React 组件，这个组件在内部管理着加载状态。当组件第一次被渲染时，它会触发

import()

，并在加载完成后渲染实际的组件。

3. Suspense 组件：

为了处理加载状态，

React

引入了

Suspense

组件。

Suspense

允许你定义在组件加载过程中显示的占位内容（例如一个加载指示器）。当动态导入的组件正在加载时，

Suspense

会显示其

fallback

属性中定义的内容：

<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>

4. 完整示例:

import React,{ Suspense }from'react';const LazyComponent = React.lazy(()=>import('./MyComponent'));functionApp(){return(<div><Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense></div>);}exportdefault App;

工作机制

• 初始渲染：

当

LazyComponent

首次被渲染时，

React.lazy

会调用传入的函数

() => import('./MyComponent')

。
这个函数返回一个

Promise

，当

Promise

解析时，它会返回实际的组件模块。

• 加载状态管理：

在

Promise

解析之前，

React.lazy

会使组件处于

"pending"

状态。

Suspense

组件会检测到这个

"pending"

状态，并显示

fallback

内容（如加载指示器）。

• 组件加载完成：

一旦

Promise

解析，

React.lazy

会将实际的组件渲染出来。

Suspense

组件会停止显示

fallback

内容，并显示加载完成的组件。

构建工具的作用

构建工具（例如 Webpack、Rollup 等）在处理动态 import() 时会自动进行代码分割，将动态导入的模块打包成单独的文件（chunk）。当这些模块被请求时，浏览器会按需加载对应的 chunk。

Webpack 示例

Webpack 是一个常用的 JavaScript 模块打包工具，它对动态 import() 提供了良好的支持。以下是 Webpack 如何处理动态 import() 的示例：

1. 配置 Webpack：Webpack 默认支持动态 import()，你只需要确保项目的 Webpack 配置正确。
2. 代码分割：当 Webpack 解析到动态 import() 时，它会自动创建一个新的 chunk 文件。例如：

// src/App.jsimport React,{ Suspense }from'react';const LazyComponent = React.lazy(()=>import('./LazyComponent'));functionApp(){return(<div><Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense></div>);}exportdefault App;

编译后，Webpack 会生成一个新的 chunk 文件（例如 LazyComponent.chunk.js），这个文件只有在 LazyComponent 被使用时才会被加载。

总结

• 动态 import()：ES6 的动态 import() 方法允许在运行时按需加载模块，返回一个 Promise。
• React.lazy：利用动态 import() 方法，React.lazy 可以定义懒加载组件。
• Suspense：使用 Suspense 组件处理懒加载组件的加载状态，显示占位内容。
• 构建工具：如 Webpack 等构建工具会自动进行代码分割，将动态导入的模块打包成单独的 chunk 文件，并在需要时按需加载。

通过这些技术的结合，React 提供了一种简单而强大的方式来实现代码分割和按需加载，从而显著提升应用性能。

不使用

Suspense

也可以实现懒加载，只是

Suspense

提供了一种更简洁、更优雅的方式来处理加载状态和占位内容。如果不使用

Suspense

，你需要手动处理加载状态和错误边界。不使用 Suspense 的懒加载示例：

mport React,{ Component }from'react';classLazyComponentLoaderextendsComponent{
  state ={component:null,loading:true,error:null,};componentDidMount(){this.loadComponent();}loadComponent(){import('./LazyComponent').then(module=>{this.setState({component: module.default,loading:false});}).catch(error=>{this.setState({ error,loading:false});});}render(){const{component: LoadedComponent, loading, error }=this.state;if(loading){return<div>Loading...</div>;}if(error){return<div>Error loading component</div>;}return LoadedComponent ?<LoadedComponent />:null;}}exportdefault LazyComponentLoader;

以下是 错误 的写法：

import{ lazy }from'react';functionEditor(){// 🔴 Bad: 这将导致在重新渲染时重置所有状态const MarkdownPreview =lazy(()=>import('./MarkdownPreview.js'));// ...}

以下是 正确 的写法：

import{ lazy }from'react';// ✅ Good: 将 lazy 组件声明在组件外部const MarkdownPreview =lazy(()=>import('./MarkdownPreview.js'));functionEditor(){// ...}

核心思想都是利用 ES6 的动态 import() 方法来实现懒加载。Suspense 只是为懒加载提供了一个更好的用户体验和更简洁的实现方式。

原文链接

React Lazy 的实现原理