suspense源码分析

Suspense 的核心概念与 error boundaries 非常相似，error boundaries 在 React 16 中引入，允许在应用程序内的任何位置捕获未捕获的异常，然后在组件树中展示跟错误信息相关的组件。以同样的方式，Suspense 组件从其子节点捕获任何抛出的Promises，不同之处在于对于 Suspense 我们不必使自定义组件充当边界，Suspense 组件就是那个边界；而在 error boundary中，我们需要为边界组件定义(componentDidCatch)方法。--摘抄此处

一、节点创建

使用的 suspence 组件就是 REACT_SUSPENSE_TYPE(Symbol.for('react.suspense'))，就是指定的一种特殊节点类型，和 div 是一个意思。

在 createFiberFromTypeAndProps 方法创建节点类型时，找到 REACT_SUSPENSE_TYPE 类型，执行 createFiberFromSuspense 创建 suspence 类型的 fiber 节点：

export function createFiberFromSuspense(
  pendingProps: any,
  mode: TypeOfMode,
  expirationTime: ExpirationTime,
  key: null | string,
) {
  const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);

  fiber.type = REACT_SUSPENSE_TYPE;
  fiber.elementType = REACT_SUSPENSE_TYPE;

  fiber.expirationTime = expirationTime;
  return fiber;
}

 回顾：节点类型的创建，在初始只会创建出根节点的 fiber，后续的创建在 beginWork 入口，进入 reconcile 过程，会判断节点可复用性，然后不能复用的就通过 createFiberFromTypeAndProps 创建新节点。

 

二、render阶段

suspense 组件类型执行大致过程如下：

                 beginWork 
                     |
                    updateSuspenseComponent
                         |
                         ...
                         mountChildFibers
                         ...
                         |
                        reconcileChildFibers

在 completeWork 中针对 SuspenseComponent 组件，执行的操作主要是进行是否需要更新标记：</