React16源码: React中的updateMode的源码实现

updateMode

1 ) 概述

• Mode 组件是 react提供给我们的原生组件
  • 一共有两个: ConcurrentMode 和 StrictMode
  • 对于这两个 Mode 的更新过程最终调用的都是 updateMode 的方法
  • 它们执行的过程非常的简单，就是通过 reconcileChildren 去创建children就可以了

2 ）源码

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L349
进入 updateMode

function updateMode(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
) {
  const nextChildren = workInProgress.pendingProps.children;
  reconcileChildren(
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  return workInProgress.child;
}

• 为什么它们可以这么简单的直接调用，这个组件又有什么意义呢？
• 进入 reconcileChildren 里面的寻找答案
  • 进入 reconcileChildFibers 再随便选一个api进入，比如 reconcileSingleElement
  • 再进入 createFiberFromElement

    // packages/react-reconciler/src/ReactFiber.js#L520
    export function createFiberFromElement(
      element: ReactElement,
      mode: TypeOfMode,
      expirationTime: ExpirationTime,
    ): Fiber {
      let owner = null;
      if (__DEV__) {
        owner = element._owner;
      }
      const type = element.type;
      const key = element.key;
      const pendingProps = element.props;
      const fiber = createFiberFromTypeAndProps(
        type,
        key,
        pendingProps,
        owner,
        mode,
        expirationTime,
      );
      if (__DEV__) {
        fiber._debugSource = element._source;
        fiber._debugOwner = element._owner;
      }
      return fiber;
    }
    

    • 这里 第二个参数 是 mode, 调用的时候，是

      const created = createFiberFromElement(
        element,
        returnFiber.mode, // 这里
        expirationTime,
      );
      

    • 这个 returnFiber 对应着 updateMode 中的 current 或 workInProgress
    • 看下 ReactFiber.js 中的 createFiberFromElement
      • 进入到 createFiberFromTypeAndProps
        • 再找到 fiber = createFiber(fiberTag, pendingProps, key, mode);
        • 这里的mode会设置到当前调和的子节点上
    • 也就是当前正在更新的节点，如果是更新 Mode 组件的父组件，调和 Mode 组件
      • 参考: packages/react-reconciler/src/ReactFiber.js#L442
    • 对应到 Mode节点来说，就可能是 ConcurrentMode 对应的 Fiber 对象
      • 其 returnFiber.mode 对应 REACT_CONCURRENT_MODE_TYPE，参考

        case REACT_CONCURRENT_MODE_TYPE:
          return createFiberFromMode(
            pendingProps,
            mode | ConcurrentMode | StrictMode, // 这里就是，最终结果： 0b011
            expirationTime,
            key,
          );
        

    • 如果是 StrictMode 对应的 Fiber 对象
      • 其 returnFiber.mode 对应 REACT_STRICT_MODE_TYPE, 参考

        case REACT_STRICT_MODE_TYPE:
          return createFiberFromMode(
            pendingProps,
            mode | StrictMode, // 这里就是，最终结果： 0b010
            expirationTime,
            key,
          );