suspense 和 lazy 配合实现懒加载的原理浅析

先看下面这段代码

javascript 复制代码

// lazy.js
function Fn() {
  return <div className="App">
    函数组件
  </div>
}

// app.js
// 添加一个固定的延迟时间，以便你可以看到加载状态
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 5000);
  }).then(() => promise);
}

const LazyFn = lazy(() => delayForDemo(import('./lazy.js')));
function SuspendedApp() {
  return (
    <Suspense fallback={<div>加载中。。。</div>}>
      <LazyFn />
    </Suspense>
  )
}


const root = ReactDOM.createRoot(document.getElementById('app'));

root.render(
  <SuspendedApp />
);

这段代码模拟了懒加载的过程，运行之后,屏幕上会先展示 Suspense 的 fallback ------ 加载中。。。 过 5 秒钟加载到组件后会自动重新渲染屏幕上出现 函数组件。。。。那这个 React 是怎么实现的呢，下面我们来看看实现的流程。

实现流程

这个流程发生在 Render 阶段。

从根节点开始挨个执行 beginWork 方法（不太清楚的话可以看看Render流程）
执行到 Suspense 的 beginWork 时，会通过 Didcaptrue 来判断是否展示 fallback 内容，第一次执行默认不展示 fallback，走正常渲染子节点
正常渲染 lazy 节点，结果返回一个 Promise，Promise 肯定没办法渲染啊，所以把这个Promise作为异常抛出
异常被捕获，发现异常是一个 Promise，为这个 Promise.then 传入了一个触发更新的方法，并找到距离这个 lazy 组件最近的 Suspense 组件并标记 shouldCapture 为 true，后续处理后标记 DidCaptrue 为 true
重新执行 Suspense 的 beginWork 方法，此时第二次执行，Didcaptrue 为 true ，展示 fallback 内容，同时把 Didcaptrue 置为 false。
懒加载的组件加载完成，触发更新，和步骤 1 一样
执行 Suspense 的 beginWork 方法，DidCaptrue 为 false，正常展示子节点
渲染 lazy 节点，此时拿到了组件，正常渲染组件

以上就是主要的实现流程（当然实际会比上面介绍的复杂一点）。