【React源码26】深入学习React 源码实现——React.lazy 与 Suspense 的底层实现

已于 2025-06-04 15:37:56 修改
阅读量822 收藏 28
点赞数 20
分类专栏： 源码学习笔记 文章标签： react.js 学习 前端 javascript react源码 懒加载 Suspense
于 2025-06-03 21:05:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38060125/article/details/148409752
版权

深入讲解 React.lazy 与 Suspense 的底层源码实现

一、历史背景与发展历程

1.1 引入动机：提升首屏加载性能

在 Web 应用日益复杂的背景下，一次性加载所有 JavaScript 资源会导致首屏加载缓慢。React 社区早期依赖第三方库（如 react-loadable）来实现组件的异步加载。

1.2 官方方案诞生：v16.6 引入 React.lazy 和 Suspense

React 团队在 v16.6 中正式引入了：

  • React.lazy：用于动态导入组件；
  • <Suspense>：用于捕获懒加载过程中的 Promise，并展示 loading 状态；

这一组合实现了官方原生支持的“按需加载”机制。

1.3 并发模式下的演进（v17+）

随着并发模式（Concurrent Mode）和 Fiber 架构的发展，React.lazy 也逐步支持中断与恢复机制，使得 React 在处理异步任务时更加灵活高效。

二、核心源码文件定位（React v18.2）

以下为 React 源码中与 React.lazy 和 Suspense 相关的核心文件路径：

文件名路径功能
ReactLazy.jspackages/react/src/ReactLazy.js定义 lazy 组件结构和 resolve 函数
ReactFiberBeginWork.jspackages/react-reconciler/src/ReactFiberBeginWork.js处理 Fiber 架构下对 lazy 组件的解析
ReactFiberSuspend.jspackages/react-reconciler/src/ReactFiberSuspend.js控制 Suspense 行为逻辑
ReactFiberNewContext.jspackages/react-reconciler/src/ReactFiberNewContext.js上下文支持

三、React.lazy 实现原理详解

3.1 数据结构设计

// packages/react/src/ReactLazy.js
const REACT_LAZY_TYPE = Symbol.for('react.lazy');

function lazy(ctor) {
  return {
    $$typeof: REACT_LAZY_TYPE,
    _payload: {
      _status: -1, // -1: pending, 0: resolved, 1: rejected
      _result: null, // 加载结果或错误
      _ctor: ctor, // 动态导入函数
    },
  };
}
字段说明：
  • $$typeof: React 内部标识对象类型的 Symbol。
  • _payload._status: 加载状态：
    • -1：未完成（pending）
    • 0：已完成（resolved）
    • 1：失败（rejected）
  • _payload._result: 缓存加载后的模块（.default）或错误信息。
  • _payload._ctor: 用户传入的动态导入函数，如 () => import('./MyComponent')

3.2 resolveLazyComponent 核心函数

该函数在组件首次渲染时调用，负责实际执行导入函数并缓存结果。

function resolveLazyComponent(lazyComponent) {
  // 获取懒加载组件的payload对象
  const payload = lazyComponent._payload;

  // 检查组件加载状态：0表示已加载完成
  if (payload._status === 0) {
    // 返回已加载组件的默认导出
    return payload._result.default;
  }

  // 检查组件加载状态：1表示加载失败
  if (payload._status === 1) {
    // 抛出加载过程中捕获的错误
    throw payload._result;
  }

  // 如果状态不是0或1，说明是第一次加载（初始状态）
  const ctor = payload._ctor; // 获取组件加载函数（通常是import()调用）
  
  try {
    // 执行加载函数获取Promise
    const modulePromise = ctor();
    
    // 更新payload状态为加载中（-1）
    payload._result = modulePromise;
    payload._status = -1;

    // 设置Promise的then/catch处理
    modulePromise.then(
      // 加载成功处理
      result => {
        payload._status = 0; // 更新状态为已完成
        payload._result = result; // 存储加载结果
      },
      // 加载失败处理
      error => {
        payload._status = 1; // 更新状态为已失败
        payload._result = error; // 存储错误对象
      }
    );

    // 抛出Promise，让Suspense可以捕获并处理加载状态
    throw modulePromise;
  } catch (error) {
    // 如果ctor()执行出错（同步错误），直接抛出
    throw error;
  }
}
注释说明：
  • 缓存机制：一旦加载完成，将结果缓存到 _payload._result 中，避免重复加载。
  • 异常传递：加载过程中抛出的是 Promise，而不是真正的组件，这是为了让 Suspense 能够捕获并展示 loading 状态。
  • 异步流程控制：通过 .then() 更新加载状态，并最终返回组件。

四、Fiber 架构下的协作机制

4.1 beginWork 阶段识别 Lazy Component

这段代码来自React的Fiber架构实现，具体是在ReactFiberBeginWork.js文件中。这是React内部处理组件渲染流程的核心部分之一。下面是老曹详细注释的代码：

// ReactFiberBeginWork.js

/**
 * 开始处理Fiber节点的work（协调阶段）
 * @param {FiberNode} current - 当前Fiber树中对应的节点（可能为null，如果是新创建的节点）
 * @param {FiberNode} workInProgress - 正在处理的Fiber节点
 * @param {Lanes} renderLanes - 表示当前渲染优先级的lane(s)
 * @returns {?FiberNode} - 返回下一个需要处理的Fiber节点
 */
function beginWork(current, workInProgress, renderLanes) {
  // 根据Fiber节点的tag类型，使用不同的更新策略
  switch (workInProgress.tag) {
    case LazyComponent: {
      // 处理懒加载组件（通过React.lazy创建的组件）
      // 调用updateLazyComponent来处理懒加载组件的更新逻辑
      return updateLazyComponent(current, workInProgress, renderLanes);
    }
    // 这里省略了其他case处理...
    // React内部有几十种不同的组件类型需要处理
  }
}

关键点说明：

  1. beginWork函数：这是React Fiber协调阶段的核心函数，负责处理每个Fiber节点的渲染工作。

  2. 参数说明：

    • current：当前Fiber树中对应的节点，如果是新创建的节点则为null
    • workInProgress：正在处理的Fiber节点（属于workInProgress树）
    • renderLanes：表示当前渲染优先级的lane(s)，用于调度优先级控制

  3. LazyComponent处理：

    • 当遇到LazyComponent类型的Fiber节点时（表示这是一个懒加载组件）
    • 调用updateLazyComponent函数来处理这类组件的更新逻辑
    • updateLazyComponent会处理懒加载组件的加载状态和渲染

  4. Fiber架构：

    • 这是React 16+引入的新协调算法
    • 将渲染工作分解为增量单元（Fiber节点），支持时间切片和优先级调度

  5. 懒加载组件：

    • 通过React.lazy创建的组件会在首次渲染时动态加载
    • 通常与Suspense组件配合使用来显示加载状态

4.2 updateLazyComponent 调用 resolveLazyComponent

这段代码来自React的Fiber架构实现，具体是在处理懒加载组件（LazyComponent）的更新逻辑。下面是老曹详细注释的代码：

/**
 * 更新懒加载组件
 * @param {FiberNode} current - 当前Fiber树中对应的节点（可能为null，如果是新创建的节点）
 * @param {FiberNode} workInProgress - 正在处理的Fiber节点
 * @param {Lanes} renderLanes - 表示当前渲染优先级的lane(s)
 * @returns {?FiberNode} - 返回下一个需要处理的Fiber节点
 */
function updateLazyComponent(current, workInProgress, renderLanes) {
  // 解析懒加载组件的实际类型
  // workInProgress.type 包含懒加载组件的描述信息
  // resolveLazyComponentType 会返回已加载的组件或抛出Promise
  const Component = resolveLazyComponentType(workInProgress.type);
  
  // 后续处理：
  // 现在 Component 是一个普通的函数组件或类组件
  // React会将其视为普通组件继续处理
  // 包括：
  // 1. 克隆Fiber节点以应用新的类型
  // 2. 设置正确的tag（可能是FunctionComponent或ClassComponent）
  // 3. 继续协调子组件
  // ...
}

其中 resolveLazyComponentType 是关键函数，内部调用了我们前面提到的 resolveLazyComponent。

关键点说明：

  1. updateLazyComponent函数：专门用于处理通过React.lazy创建的懒加载组件的更新逻辑。

  2. 参数说明：

    • current：当前Fiber树中对应的节点，如果是新创建的节点则为null
    • workInProgress：正在处理的Fiber节点（属于workInProgress树）
    • renderLanes：表示当前渲染优先级的lane(s)，用于调度优先级控制

  3. resolveLazyComponentType：

    • 这是一个内部函数，负责解析懒加载组件的实际类型
    • 它会处理组件的加载状态（已加载、加载中、加载失败）
    • 如果组件尚未加载，它会抛出Promise，让Suspense可以捕获并显示fallback UI
    • 如果组件已加载，它返回实际的组件类型

  4. 后续处理：

    • 一旦获取到实际的组件类型（Component），React会将其视为普通组件处理
    • 这包括克隆Fiber节点、设置正确的组件类型tag（函数组件或类组件）
    • 然后继续协调（reconcile）子组件

  5. 与Suspense的协作：

    • 懒加载组件通常与Suspense组件一起使用
    • 当组件正在加载时，Suspense会显示其fallback内容
    • 这种协作是通过resolveLazyComponentType抛出Promise实现的

五、Suspense 捕获 Promise 的机制

5.1 源码位置

这段代码来自React的Fiber架构实现，具体是在ReactFiberSuspend.js文件中。这是一个非常简单的辅助函数，用于处理异步加载状态。下面是老曹详细注释的代码：

// ReactFiberSuspend.js

/**
 * 如果传入的Promise仍然处于pending状态，则抛出该Promise
 * @param {Promise} promise - 需要检查的Promise对象
 * @throws {Promise} - 如果Promise仍处于pending状态，则抛出该Promise
 */
function throwIfStillPending(promise) {
  // 简单直接地抛出传入的Promise
  // 这个函数通常用于Suspense机制中
  // 当React需要检查异步操作是否完成时
  throw promise;
}

当组件抛出一个 Promise 时，React 会检查其是否被 <Suspense> 包裹，如果包裹，则显示 fallback UI；否则直接报错。

关键点说明：

  1. 函数目的：

    • 这是一个辅助函数，用于在React的Suspense机制中处理异步加载状态
    • 当React需要检查一个异步操作（如懒加载组件）是否完成时，会调用此函数

  2. 工作原理：

    • 函数非常简单，只是直接抛出传入的Promise
    • 这种抛出机制是Suspense能够捕获异步状态的关键
    • 如果Promise仍处于pending状态，React的Suspense机制会捕获这个Promise并显示fallback UI

  3. 使用场景：

    • 通常与React.lazy和Suspense一起使用
    • 当懒加载组件仍在加载时，这个函数会被用来中断当前渲染
    • 允许React显示加载状态，直到Promise解决

  4. 错误处理：

    • 这个函数本身不处理错误，只是抛出Promise
    • 错误处理由调用者或React的Suspense机制负责

  5. 与React Fiber架构的关系：

    • 这是React Fiber架构中处理异步渲染的一部分
    • 允许React在等待异步操作时暂停渲染，并在操作完成后恢复

5.2 fallback 显示逻辑

这段代码是React内部实现的一部分，用于处理Suspense组件的挂载阶段。实际的React实现要复杂得多。下面是老曹详细注释的简化代码：

// ReactFiberSuspend.js

/**
 * 挂载Suspense组件
 * @param {FiberNode} workInProgress - 正在处理的Fiber节点
 * @param {Object} suspenseProps - Suspense组件的props
 * @param {ReactNode} suspenseProps.children - Suspense包裹的子组件
 * @param {ReactNode} suspenseProps.fallback - 加载中显示的内容
 * @returns {ReactNode} - 返回要渲染的内容
 */
function mountSuspenseComponent(workInProgress, suspenseProps) {
  const { children, fallback } = suspenseProps;

  // 检查当前是否有挂起的Promise（即是否有异步加载正在进行）
  if (isCurrentPromisePending()) {
    // 如果有挂起的Promise，返回fallback内容（通常是加载指示器）
    return fallback;
  } else {
    // 如果没有挂起的Promise，返回子组件内容
    return children;
  }
}

关键点说明：

  1. 函数目的：

    • 处理Suspense组件的初始挂载
    • 决定是显示加载状态（fallback）还是显示实际内容（children）

  2. 参数说明：

    • workInProgress：正在处理的Fiber节点
    • suspenseProps：Suspense组件的props对象
      • children：Suspense包裹的子组件
      • fallback：加载中显示的内容

  3. isCurrentPromisePending：

    • 这是一个内部函数，用于检查当前是否有未解决的Promise
    • 在实际实现中，React会跟踪所有挂起的异步操作
    • 这个函数检查是否有任何异步加载仍在进行中

  4. 行为逻辑：

    • 如果有挂起的Promise（如懒加载组件正在加载），返回fallback内容
    • 如果没有挂起的Promise，返回children内容

  5. 实际实现注意事项：

    • 实际React实现要复杂得多，涉及Fiber架构的多个方面
    • 需要处理边界情况、错误状态和并发渲染
    • 会与调度器（Scheduler）和协调器（Reconciler）紧密协作

  6. 与React.lazy的关系：

    • 通常与React.lazy创建的懒加载组件一起使用
    • 提供优雅的加载状态显示机制

这个简化版本展示了Suspense的基本工作原理，但实际实现需要考虑更多细节和边界情况。

六、完整算法流程图解

+-----------------------------------+     +-------------------------------+
| 组件调用 React.lazy(() => import(...)) |---->| 创建 Lazy Component 对象      |
+-----------------------------------+     +-------------------------------+
                                                    |
                                                    v
                                            +-------------------------------+
                                            | 渲染组件时调用               |
                                            | resolveLazyComponent()        |
                                            +-------------------------------+
                                                    |
                                                    v
                                            +-------------------------------+
                                            | 判断 _status 是否为 0?        |
                                            +-------------------------------+
                                                    |
                                        +-----------+-----------+
                                        |                       |
                                        v                       v
                               +-----------------------+ +-----------------------+
                               | 是 - 直接返回缓存组件 | | 否 - 调用 ctor() 触发 |
                               +-----------------------+ | import()              |
                                                        +-----------------------+
                                                                    |
                                                                    v
                                                            +-----------------------+
                                                            | 设置 _status 为 -1,    |
                                                            | _result 为 Promise    |
                                                            +-----------------------+
                                                                    |
                                                                    v
                                                            +-----------------------+
                                                            | 抛出 Promise          |
                                                            +-----------------------+
                                                                    |
                                                                    v
                                                            +-----------------------+
                                                            | Suspense 捕获异常     |
                                                            +-----------------------+
                                                                    |
                                                                    v
                                                            +-----------------------+
                                                            | Promise 是否成功?     |
                                                            +-----------------------+
                                                                    |
                                                        +-----------+-----------+
                                                        |                       |
                                                        v                       v
                                               +-----------------+     +-----------------+
                                               | 成功 - _status = 0, |     | 失败 - _status = 1, |
                                               | _result = module.default | | _result = error      |
                                               +-----------------+     +-----------------+
                                                        |                       |
                                                        v                       v
                                               +-----------------+     +-----------------+
                                               | 下次渲染返回组件 |     | ErrorBoundary 或  |
                                               +-----------------+     | fallback 显示错误 |
                                                                      +-----------------+

七、代码模拟实现（完整版）

7.1 模拟 React.lazy

const REACT_LAZY_TYPE = Symbol.for('react.lazy');

function lazy(ctor) {
  return {
    $$typeof: REACT_LAZY_TYPE,
    _payload: {
      _status: -1, // -1: pending, 0: resolved, 1: rejected
      _result: null,
      _ctor: ctor,
    },
  };
}

7.2 resolveLazyComponent 函数

/**
 * 解析懒加载组件
 * @param {Object} lazyComponent - 懒加载组件对象
 * @returns {React.Component|Promise} - 返回已加载的组件或抛出Promise
 */
function resolveLazyComponent(lazyComponent) {
  // 获取懒加载组件的payload对象
  const payload = lazyComponent._payload;

  // 检查组件加载状态：0表示已加载完成
  if (payload._status === 0) {
    // 返回已加载组件的默认导出
    return payload._result.default;
  }

  // 检查组件加载状态：1表示加载失败
  if (payload._status === 1) {
    // 抛出加载过程中捕获的错误
    throw payload._result;
  }

  // 如果状态不是0或1，说明是第一次加载（初始状态）
  const ctor = payload._ctor; // 获取组件加载函数（通常是import()调用）
  
  try {
    // 执行加载函数获取Promise
    const modulePromise = ctor();
    
    // 更新payload状态为加载中（-1）
    payload._result = modulePromise;
    payload._status = -1;

    // 设置Promise的then/catch处理
    modulePromise.then(
      // 加载成功处理
      result => {
        payload._status = 0; // 更新状态为已完成
        payload._result = result; // 存储加载结果
      },
      // 加载失败处理
      error => {
        payload._status = 1; // 更新状态为已失败
        payload._result = error; // 存储错误对象
      }
    );

    // 抛出Promise，让Suspense可以捕获并处理加载状态
    throw modulePromise;
  } catch (error) {
    // 如果ctor()执行出错（同步错误），直接抛出
    throw error;
  }
}

7.3 Suspense 模拟实现

function MySuspense({ children, fallback }) {
  try {
    return children;
  } catch (e) {
    if (e.status === -1) {
      return <>{fallback}</>;
    }
    throw e;
  }
}

7.4 使用示例

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

function App() {
  return (
    <MySuspense fallback="Loading...">
      <LazyComponent />
    </MySuspense>
  );
}

八、总结

特性描述
React.lazy接收一个返回 Promise 的函数，封装成可被 React 渲染器识别的 Lazy Component
Suspense捕获组件抛出的 Promise，并根据加载状态展示 fallback 或 children
异常传递机制利用 JavaScript 的异常机制驱动 UI 展示
缓存机制加载完成后缓存组件，避免重复加载
与 Fiber 协作支持中断与恢复，适用于并发模式
设计模式工厂模式 + 状态模式 + 异常传递 + 单例缓存

九、结语

通过对 React.lazy 和 Suspense 的源码分析、算法流程、数据结构设计、以及完整的代码模拟实现，我们可以看到其背后是一套精妙的状态管理与异步控制机制。

掌握这套机制，不仅有助于你理解 React 的异步渲染模型，也能帮助你在构建大型应用时更好地进行性能优化与架构设计。

如果你希望进一步研究，老曹建议阅读官方源码中的如下部分：

  • ReactLazy.js：了解 lazy 基础结构；
  • ReactFiberSuspend.js：学习 Suspense 如何处理 promise；
  • ReactFiberBeginWork.js：观察组件如何在 Fiber 架构下解析 lazy 组件。
react.lazy react.suspense实现动态引入组件
weixin_41973410的博客
10-09 1334
React.lazy和Suspense的功能主要是利用了webpack对es6的import动态载入组件，可以自动实现Code Splitting。Code Spliting，即代码分割，能够“懒加载”当前用户所需要的内容，显著提高应用的性能。尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。 React.lazy React.lazy函数能让你像渲染常规组件一样处理动态引入（的组件）。 使用之前： import OtherComponent f
React性能优化: 使用React.lazy与Suspense提高加载效率
qq_24428851的博客
02-11 360
在懒加载组件时，Suspense可以让我们在组件加载完成之前展示一些缓冲内容，让用户在等待的时候有更好的体验。通过使用React.lazy与Suspense，我们可以很容易地实现组件的按需加载，并在加载过程中展示友好的等待状态，从而提高页面加载效率，提升用户体验。在上面的示例中，我们使用React.lazy来按需加载OtherComponent组件，当OtherComponent组件加载时，Suspense会显示fallback中的loading内容，直到组件加载完成。什么是React.lazy？
深入解析React.lazy与Suspense：现代React应用的性能优化利器
最新发布
vvilkin的学习备忘
04-21 1155
在当今前端开发领域，应用性能优化始终是一个核心议题。随着单页应用(SPA)的复杂度不断提升，JavaScript包体积膨胀成为影响用户体验的关键因素。React团队为此推出了React.lazy和Suspense这两个强大的API，它们共同构成了React应用中实现代码分割和懒加载的黄金标准。本文将深入剖析这两个特性的工作原理、实现机制以及最佳实践，帮助开发者充分利用这些工具提升应用性能。
React 之 Suspense和lazy
EmotionComputer
08-12 1494
使用import()动态导入后返回一个promise，但是通过lazy包裹后可以得到一个直接渲染的组件。允许你显示一个退路方案（fallback）直到它的所有子组件完成加载。suspense：n. 焦虑、悬念。
深入理解React：懒加载（lazy）实现原理
大灰狼的小绵羊哥哥的博客
06-19 7004
目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 （1）为什么要进行代码分割？ 现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。 而为了解决这样的问题，避
探索React懒加载的无限可能 —— react-lazy深入解析
gitblog_00067的博客
06-23 1170
???? 探索React懒加载的无限可能 —— react-lazy深入解析 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在前端开发领域中，React作为一款强大的JavaScript库，已经深刻地影响了Web应用的设计与构建方式。今天，我们要向大家隆重介绍的是一个名为react-lazy的开源项目——它致力于解决React应用程序中的性能瓶颈问题，通过实现组件的懒加载和...
React Lazy 的实现原理
LaughingZhu的博客
08-12 1274
动态 import()：ES6 的动态 import() 方法允许在运行时按需加载模块，返回一个 Promise。React.lazy：利用动态 import() 方法，React.lazy 可以定义懒加载组件。Suspense：使用 Suspense 组件处理懒加载组件的加载状态，显示占位内容。构建工具：如 Webpack 等构建工具会自动进行代码分割，将动态导入的模块打包成单独的 chunk 文件，并在需要时按需加载。
【React】《React 学习手册 (第2版) 》笔记-Chapter9-Suspense
江湖人称菠萝包
06-18 1527
只不过，ErrorBoundary 组件在出现错误时回落到一个错误消息，而 Suspense 组件在惰性加载组件时渲染一个消息，提示正在加载中。发生变化时，React 以 JavaScript 对象的形式创建一份组件树副本，找出组件树中需要改动的部分，只改动那些部分。创建兼容 Suspense 的数据源只需要一个 promise，因此我们可以定义一个函数，接受一个 promise 为参数，返回一个兼容 Suspense 的数据源。通常，无穷循环并不是我们想要的效果，在 React 中也是如此。
React源码解析系列(一) —— React.createElement
wlqdbtx的博客
12-20 752
在开始看react源码前觉得代码量应该会非常庞大，然而在看完react源码后发现实际上react的源码只是一些API和数据结构的定义，真正的更新渲染逻辑是react-dom这块源码里控制的。 本此源码解析系列不包括dev环境下的代码，只对主流程代码进行讲解。 react的源码地址为：react 我们先来看下react的目录结构： 下面让我们看下react对我们暴露的API：/p...
react作业项目源码.docx
07-03
- **懒加载**：使用React.lazy和Suspense组件实现按需加载功能，提升首屏加载速度。 - **代码分割**：利用Webpack等打包工具将代码分割成多个小块，减小单个文件体积。 #### 2. 状态管理 - **Redux**：适用于复杂...
react实现路由懒加载 【lazy | Suspense | BrowserRouter】
weixin_44607531的博客
02-24 1425
react实现路由懒加载 一般我们引入路由像import World from '../World' 这样引入 而路由懒加载要使用lazy函数 1、懒加载方式引入路由 const World = lazy(() => import('../World')) 2、使用Suspense 只是像第一步那样还不够，系统会报错。 首先明白一点：使用了懒加载之后加载路由的时机是点击对应的路由链接时开始发送请求引入路由组件。 假如网速慢就要等待很长的时间，这时候需要显示正在加载中的文字或效果以提升.
React Suspense 尝鲜
weixin_34177064的博客
03-06 476
前言 如同字面意思，Suspense 让组件遇到异步操作时进入“悬停”状态，等异步操作有结果时再回归正常状态。 异步操作简单归为两类： 异步加载代码 异步加载数据 异步加载代码 异步加载代码就是所谓的 code splitting，实现起来就像是这样： import React, {lazy, Suspense} from 'react'; const OtherComponent = la...
React.lazy懒加载组件
hyupeng1006的博客
10-12 1015
1. React.lazy的用法 React.lazy方法可以异步加载组件文件。 const Foo = React.lazy(() => import('../componets/ChildComponent)); React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等。 <React.Suspense fallback={<div>loading...</div>}>
React.lazy() 实现路由懒加载
热门推荐
weixin_45679977的博客
08-04 1万+
React 16.6.0发布了React.lazy来实现React组件的懒加载 用户访问页面的 2/5/8 原则：2秒之内用户觉得很快，5秒之内用户觉得还可以，8秒之外用户觉得系统慢，无法忍受，甚至会离开页面。因此页面的加载速度是十分重要的，懒加载通过对组件进行分割打包成多个chunk来减少一次性加载的资源大小。从而减少用户不必要的等待。 加载首页的时候并不需要加载其他业务模块，因此这些业务模块对应的组件都可以通过懒加载的形式来引入，加快首屏渲染速度，提高用户转化率。 React.lazy的使用 imp
react懒加载lazy
sunnyjingqi的博客
10-24 563
lazy能够让你在组件第一次被渲染之前延迟加载组件的代码。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4327
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈前端老曹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值