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, // 这里就是，最终结果： 0b011expirationTime,key,);
        

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

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