React16源码: React中处理LegacyContext相关的源码实现

LegacyContext

  • 老的 contextAPI 也就是我们使用 childContextTypes 这种声明方式
  • 来从父节点为它的子树提供 context 内容的这么一种方式
  • 遗留的contextAPI 在 react 17 被彻底移除了,就无法使用了
  • 那么为什么要彻底移除这个contextAPI的使用方式呢?
  • 因为它对性能的影响会比较的大,它会影响整个子树的一个更新过程
  • 它嵌套的context提供者是需要进行一个数据的合并的
    • 嵌套组件中,如果父子两者都提供相同的变量,会进行一个合并
    • 越接近里层,越会被选择
    • 也就是说在孙子消费变量的时候,选择父亲的,舍弃爷爷的

2 )源码

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L1522

在这里,有这个判断 if ( oldProps === newProps && !hasLegacyContextChanged() && updateExpirationTime < renderExpirationTime ) {}

看到有

import {
  hasContextChanged as hasLegacyContextChanged
} from './ReactFiberContext';

关注 hasLegacyContextChanged 基于此,定位到 (packages/react-reconciler/src/ReactFiberContext.js#L115)[https://github.com/facebook/react/blob/v16.6.3/packages/react-reconciler/src/ReactFiberContext.js#L115]

// 要去推入 stack 的值的时候,就要去创建这么一个 cursor 来标记不同类型的一个值
function hasContextChanged(): boolean {
  return didPerformWorkStackCursor.current;
}

回顾到 context-stack 中

// packages/react-reconciler/src/ReactFiberContext.js#L36

// A cursor to the current merged context object on the stack.
// 用来记录我们当前的我们更新到某一个节点之后,它应该可以拿到的context对应的所有值
let contextStackCursor: StackCursor<Object> = createCursor(emptyContextObject);

// A cursor to a boolean indicating whether the context has changed.
// 代表着我们在更新到某一个节点的时候,它这个context是否有变化这么一个情况
let didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);

再次回到 ReactFiberBeginWork.js 中的 if ( oldProps === newProps && !hasLegacyContextChanged() && updateExpirationTime < renderExpirationTime ) {}

对于在 beginWork 中的 context 操作,可以看上述判断成立的条件下的代码,即便有符合跳过更新的操作,依然 需要 push 和 pop 操作

进入代码

switch (workInProgress.tag) {
  case ClassComponent: {
    const Component = workInProgress.type;
    // 如果当前组件是一个 provider 则进行 push 操作
    if (isLegacyContextProvider(Component)) {
      pushLegacyContextProvider(workInProgress);
    }
    break;
  }
}
  • 跟遗留的 contextAPI 有关,通过 legency 标志,如果一个组件能够作为一个 context 的提供者

  • 那么它肯定是一个 ClassComponent, 因为要通过 getchildcontext 这么一个方法来声明我们子树当中提供了哪些 concontext

  • 最主要的就是来看在classcomponent的更新过程当中,如果它是一个contextprovider,那么它要执行的操作是 pushLegacyContextProvider

  • 进入 isLegacyContextProvider, 看到它是 isContextProvider 的别名

    // 这个 type 就是组件实例,这个 childContextTypes
    function isContextProvider(type: Function): boolean {
      // 通过判断应用中声明的 class 上面是否有这个属性
      const childContextTypes = type.childContextTypes;
      return childContextTypes !== null && childContextTypes !== undefined;
    }
    
    • 通过声明的这个class给它挂载 childContextTypes 来表示它是一个context的提供者
    • 只有声明了这个之后,它才会作为一个context的provider来提供子树上面的context
    • 如果不这么声明,即便在class里面提供了 getChildContext 这个方法,还是拿不到对应的context
  • 进入 pushLegacyContextProvider 它是 pushContextProvider 的别名

    function pushContextProvider(workInProgress: Fiber): boolean {
      const instance = workInProgress.stateNode;
      // We push the context as early as possible to ensure stack integrity.
      // If the instance does not exist yet, we will push null at first,
      // and replace it on the stack later when invalidating the context.
      const memoizedMergedChildContext =
        (instance && instance.__reactInternalMemoizedMergedChildContext) ||
        emptyContextObject;
    
      // Remember the parent context so we can merge with it later.
      // Inherit the parent's did-perform-work value to avoid inadvertently blocking updates.
      previousContext = contextStackCursor.current; // 获取之前的 context 挂载到全局变量上
      push(contextStackCursor, memoizedMergedChildContext, workInProgress);
      push(
        didPerformWorkStackCursor,
        didPerformWorkStackCursor.current,
        workInProgress,
      );
    
      return true;
    }
    

以上是可以跳出当前组件的更新的一个处理情况

如果我们可以跳出组件的更新,也就是代表着当前这个 classComponent,它的state它的props都应该是没有任何变化的

这个时候, 当然是可以直接使用保存在它上面原始的 context 的对象

如果它是一个需要更新的 classComponent,需要看一下 updateClassComponent 这个更新方法

function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps,
  renderExpirationTime: ExpirationTime,
) {
  // Push context providers early to prevent context stack mismatches.
  // During mounting we don't know the child context yet as the instance doesn't exist.
  // We will invalidate the child context in finishClassComponent() right after rendering.
  let hasContext;
  if (isLegacyContextProvider(Component)) {
    hasContext = true;
    pushLegacyContextProvider(workInProgress);
  } else {
    hasContext = false;
  }
  prepareToReadContext(workInProgress, renderExpirationTime);

  const instance = workInProgress.stateNode;
  let shouldUpdate;
  if (instance === null) {
    if (current !== null) {
      // An class component without an instance only mounts if it suspended
      // inside a non- concurrent tree, in an inconsistent state. We want to
      // tree it like a new mount, even though an empty version of it already
      // committed. Disconnect the alternate pointers.
      current.alternate = null;
      workInProgress.alternate = null;
      // Since this is conceptually a new fiber, schedule a Placement effect
      workInProgress.effectTag |= Placement;
    }
    // In the initial pass we might need to construct the instance.
    constructClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
    mountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
    shouldUpdate = true;
  } else if (current === null) {
    // In a resume, we'll already have an instance we can reuse.
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  } else {
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  }
  return finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderExpirationTime,
  );
}
  • 一进来就调用了 isLegacyContextProvider 方法

    • 就是如果它是一个contextprovider,那么它要进行 push 操作 pushLegacyContextProvider
  • 接下去, 它调用了一个方法,叫做 prepareToReadContext 这么一个方法

    • 这个方法和新的contextAPI有关,先跳过
  • 接下去基本上没有跟 context 相关的内容了,这里进入 finishClassComponent

    function finishClassComponent(
      current: Fiber | null,
      workInProgress: Fiber,
      Component: any,
      shouldUpdate: boolean,
      hasContext: boolean,
      renderExpirationTime: ExpirationTime,
    ) {
      // Refs should update even if shouldComponentUpdate returns false
      markRef(current, workInProgress);
    
      const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
    
      if (!shouldUpdate && !didCaptureError) {
        // Context providers should defer to sCU for rendering
        if (hasContext) {
          invalidateContextProvider(workInProgress, Component, false);
        }
    
        return bailoutOnAlreadyFinishedWork(
          current,
          workInProgress,
          renderExpirationTime,
        );
      }
    
      const instance = workInProgress.stateNode;
    
      // Rerender
      ReactCurrentOwner.current = workInProgress;
      let nextChildren;
      if (
        didCaptureError &&
        typeof Component.getDerivedStateFromError !== 'function'
      ) {
        // If we captured an error, but getDerivedStateFrom catch is not defined,
        // unmount all the children. componentDidCatch will schedule an update to
        // re-render a fallback. This is temporary until we migrate everyone to
        // the new API.
        // TODO: Warn in a future release.
        nextChildren = null;
    
        if (enableProfilerTimer) {
          stopProfilerTimerIfRunning(workInProgress);
        }
      } else {
        if (__DEV__) {
          ReactCurrentFiber.setCurrentPhase('render');
          nextChildren = instance.render();
          if (
            debugRenderPhaseSideEffects ||
            (debugRenderPhaseSideEffectsForStrictMode &&
              workInProgress.mode & StrictMode)
          ) {
            instance.render();
          }
          ReactCurrentFiber.setCurrentPhase(null);
        } else {
          nextChildren = instance.render();
        }
      }
    
      // React DevTools reads this flag.
      workInProgress.effectTag |= PerformedWork;
      if (current !== null && didCaptureError) {
        // If we're recovering from an error, reconcile without reusing any of
        // the existing children. Conceptually, the normal children and the children
        // that are shown on error are two different sets, so we shouldn't reuse
        // normal children even if their identities match.
        forceUnmountCurrentAndReconcile(
          current,
          workInProgress,
          nextChildren,
          renderExpirationTime,
        );
      } else {
        reconcileChildren(
          current,
          workInProgress,
          nextChildren,
          renderExpirationTime,
        );
      }
    
      // Memoize state using the values we just used to render.
      // TODO: Restructure so we never read values from the instance.
      workInProgress.memoizedState = instance.state;
    
      // The context might have changed so we need to recalculate it.
      if (hasContext) {
        invalidateContextProvider(workInProgress, Component, true);
      }
    
      return workInProgress.child;
    }
    
    • hasContext 是否是一个 contextProvider
    • 如果是 true, 则执行 invalidateContextProvider(workInProgress, Component, false);
      function invalidateContextProvider(
        workInProgress: Fiber,
        type: any,
        didChange: boolean,
      ): void {
        const instance = workInProgress.stateNode;
        invariant(
          instance,
          'Expected to have an instance by this point. ' +
            'This error is likely caused by a bug in React. Please file an issue.',
        );
      
        // 如果有变化
        if (didChange) {
          // Merge parent and own context.
          // Skip this if we're not updating due to sCU.
          // This avoids unnecessarily recomputing memoized values.
          const mergedContext = processChildContext(
            workInProgress,
            type,
            previousContext,
          );
          instance.__reactInternalMemoizedMergedChildContext = mergedContext;
      
          // Replace the old (or empty) context with the new one.
          // It is important to unwind the context in the reverse order.
          pop(didPerformWorkStackCursor, workInProgress);
          pop(contextStackCursor, workInProgress);
          // Now push the new context and mark that it has changed.
          push(contextStackCursor, mergedContext, workInProgress);
          push(didPerformWorkStackCursor, didChange, workInProgress);
        } else {
          pop(didPerformWorkStackCursor, workInProgress);
          push(didPerformWorkStackCursor, didChange, workInProgress);
        }
      }
      
      • 通过 processChildContext 计算出新的 context 并挂载到 __reactInternalMemoizedMergedChildContext
      • 之后,pop 2次,push 2次 来处理了栈内的顺序
      • 进入 processChildContext 看下这个方法
        function processChildContext(
          fiber: Fiber,
          type: any,
          parentContext: Object,
        ): Object {
          const instance = fiber.stateNode;
          const childContextTypes = type.childContextTypes;
        
          // TODO (bvaughn) Replace this behavior with an invariant() in the future.
          // It has only been added in Fiber to match the (unintentional) behavior in Stack.
          // 这个属性一定是 function 才能生效
          if (typeof instance.getChildContext !== 'function') {
            if (__DEV__) {
              const componentName = getComponentName(type) || 'Unknown';
        
              if (!warnedAboutMissingGetChildContext[componentName]) {
                warnedAboutMissingGetChildContext[componentName] = true;
                warningWithoutStack(
                  false,
                  '%s.childContextTypes is specified but there is no getChildContext() method ' +
                    'on the instance. You can either define getChildContext() on %s or remove ' +
                    'childContextTypes from it.',
                  componentName,
                  componentName,
                );
              }
            }
            return parentContext;
          }
        
          let childContext;
          if (__DEV__) {
            ReactCurrentFiber.setCurrentPhase('getChildContext');
          }
          startPhaseTimer(fiber, 'getChildContext');
          childContext = instance.getChildContext(); // 执行这个 提供的api, 获取数据
          stopPhaseTimer();
          if (__DEV__) {
            ReactCurrentFiber.setCurrentPhase(null);
          }
          for (let contextKey in childContext) {
            invariant(
              contextKey in childContextTypes,
              '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
              getComponentName(type) || 'Unknown',
              contextKey,
            );
          }
          // 忽略
          if (__DEV__) {
            const name = getComponentName(type) || 'Unknown';
            checkPropTypes(
              childContextTypes,
              childContext,
              'child context',
              name,
              // In practice, there is one case in which we won't get a stack. It's when
              // somebody calls unstable_renderSubtreeIntoContainer() and we process
              // context from the parent component instance. The stack will be missing
              // because it's outside of the reconciliation, and so the pointer has not
              // been set. This is rare and doesn't matter. We'll also remove that API.
              ReactCurrentFiber.getCurrentFiberStackInDev,
            );
          }
          // 最终是两者 merge
          return {...parentContext, ...childContext};
        }
        
        • 其实,这个 processChildContext 非常简单,获取 context,合并 context
        • 这里的 parentContext 是传入的 previousContext, 这个是上面调用 pushContextProvider 时设置的全局变量 contextStackCursor.current
        • 也就是 父组件中 提供的 context 对象,最终都是为了合并
  • 总结来说,父子孙三个组件,在更新子组件的时候,先去push了一个它之前存在的这个属性

  • 因为我们不知道这个组件它是否要更新,不管它是否要更新,都要先都要执行 push 的一个操作

  • 所以,先 push 一个老的值进去再说, 然后到后面,如果发现这个组件它是要更新的,就调用这个 invalidateContextProvider 方法

  • 调用了这个方法之后, 根据传进来的 didChange,如果是 true 表示要更新,要重新去计算一个新的合并过的这个context, 即 mergedContext 给它推入到栈里面

  • 对于子组件来说,它的所有子树所获取到的context肯定是经过子组件,和上层的父组件合并的 context 了, 也就是 contextStackCursor 这里

  • 同时对于 didPerformWorkStackCursor 来说,因为 didChange 是 true,它的 current 肯定也是 true

  • 如果 didChange 是 false,这个时候不需要改变 contextStackCursor

    • 因为 push 的本来就是上面的那个值,也就是上一次计算出来的这个值
    • 就是保存在 __reactInternalMemoizedMergedChildContext 这上面的值
    • 因为它本身没有变化,不需要去改动它,而对于 didPerformWorkStackCursor 来说,需要去改变它
    • didChange 变成false,我没有更新,不能继续存之前的那个值, 因为之前的那个值可能是更新过了,它可能是 true
    • 我这次发现这个组件是不需要更新的, 要把它改成 false
    • 在一开始,这个方法就是叫做 hasContextChaned 的这个方法,它是用来判断这个组件
    • 是否可以跳过更新的一个非常关键的一个值, 如果它返回的一直是 true
    • 会导致我们每一个组件都需要去更新,而最终导致整个性能变得非常的差
    • 所以这就是 didPerformWorkStackCursor 它的一个作用
  • 老的 context api当中的 push 操作是比较复杂的,要进行一个 context 的合并这么一个过程

  • 到这里为止,将context的合并,并让它入栈

  • 注意,还有一种情况是这样的,父子孙三层组件,有一个子组件没有儿子组件

  • 也就是有多个子组件,其中有的子组件没有下层组件,这时候这类子组件拿到的是父组件原来的,而非合并过的

  • 看下具体的代码处理, 比如说我们随便挑一个 class component,更新过程当中调用的方法, 如 updateClassInstance 这个方法

    // Invokes the update life-cycles and returns false if it shouldn't rerender.
    function updateClassInstance(
      current: Fiber,
      workInProgress: Fiber,
      ctor: any,
      newProps: any,
      renderExpirationTime: ExpirationTime,
    ): boolean {
      const instance = workInProgress.stateNode;
    
      // ... 跳过很多代码
    
      const contextType = ctor.contextType; // 注意这里
      let nextContext;
      if (typeof contextType === 'object' && contextType !== null) {
        nextContext = readContext(contextType);
      } else {
        // 注意这个 else, 这个是重点
        const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
        nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);
      }
    
      // ... 跳过很多代码
    
      return shouldUpdate;
    }
    
  • 这里有一个在 ctor.contextType 在 classComponent 上面去读取这个属性

  • 注意,这里 contextTypecontextTypes 的区别

    • 后者在应用中,我们自己的代码里用于设定接收上层属性的
    • 前者就是要去读取某一个新的 contextAPI 它的 provider 上面提供的属性
    • 也就是说可以这么设置 Child.contextType = Consumer
    • 两者共同存在,则后者老的失效
    • 也就是说,如果 孙组件使用了 新的 contextType 这个api, 后面同时定义的 contextTypes 相关的会失效
  • 对于react来说,它即将把所有context相关的东西呢都放在新的contextAPI里面

    • 所以如果我们优先使用了 contextType 这种新的 context API 的使用方式
    • 就直接默认只使用新的 context
    • 而只有在没有使用这个新的 context API 的时候才会去使用老的 context API
    • 这个时候我们就会去调用一个叫做 getUnmaskedContext(workInProgress, ctor, true)
    • 这个方法来去读取用在这一个组件上面它所对应的context属性
      function getUnmaskedContext(
        workInProgress: Fiber,
        Component: Function,
        didPushOwnContextIfProvider: boolean,
      ): Object {
        if (didPushOwnContextIfProvider && isContextProvider(Component)) {
          // If the fiber is a context provider itself, when we read its context
          // we may have already pushed its own child context on the stack. A context
          // provider should not "see" its own child context. Therefore we read the
          // previous (parent) context instead for a context provider.
          return previousContext;
        }
        return contextStackCursor.current;
      }
      
      • didPushOwnContextIfProvider 传进来的时候是 true
      • 代表是否已经 push 了自己的 contextProvider,对于我们自己是一个 contextProvider 的一个情况
      • 在调用update之前,那么肯定是已经调用过push了, 如果提供了 context,这个值就是true
      • 而后面还需要判断它是否是一个 contextProvider,如果这两个条件都符合,返回的是 previousContext
      • 这个 previousContext 就是之前在调用 push 操作的时候,即 pushContextProvider,给它赋值的这个值
      • 就比如说在更新 子组件 的过程中,执行 updateClassComponent
      • 先 push 了自己的 contextProvider, 这个时候赋值给了 previousContext
      • 它等于 push 之前的那个context,就是 父组件提供的 context
      • 对于 子组件 更新的过程当中使用的 context,肯定不能使用自己提供的这个 value
      • 子组件提供的value是给自己子树,也就是孙组件及之后使用的
      • 子组件要用context的话,应该是去读取父组件提供的 context
      • 子组件要去获取父组件提供的context,要去调用 getUnmaskedContext 这个方法
      • 而如果组件同时是一个provider,那它肯定已经push过了,所以组件必须返回 previousContext 才行
      • 同样,如果组件不是一个 contextprovider,当然没有执行过push,只需要执行当前这个cursor即可
    • 进入 getMaskedContext
      function getMaskedContext(
        workInProgress: Fiber,
        unmaskedContext: Object,
      ): Object {
        const type = workInProgress.type;
        const contextTypes = type.contextTypes;
        if (!contextTypes) {
          return emptyContextObject;
        }
      
        // Avoid recreating masked context unless unmasked context has changed.
        // Failing to do this will result in unnecessary calls to componentWillReceiveProps.
        // This may trigger infinite loops if componentWillReceiveProps calls setState.
        const instance = workInProgress.stateNode;
        if (
          instance &&
          instance.__reactInternalMemoizedUnmaskedChildContext === unmaskedContext
        ) {
          return instance.__reactInternalMemoizedMaskedChildContext;
        }
      
        // 注意,这里是核心
        const context = {};
        for (let key in contextTypes) {
          context[key] = unmaskedContext[key];
        }
      
        if (__DEV__) {
          const name = getComponentName(type) || 'Unknown';
          checkPropTypes(
            contextTypes,
            context,
            'context',
            name,
            ReactCurrentFiber.getCurrentFiberStackInDev,
          );
        }
      
        // Cache unmasked context so we can avoid recreating masked context unless necessary.
        // Context is created before the class component is instantiated so check for instance.
        if (instance) {
          cacheContext(workInProgress, unmaskedContext, context);
        }
      
        return context;
      }
      
      • 这个方法是在组件的父组件中所有合并过的 context 中获得当前组件需要读取的属性
      • 也就是说当前组件需要什么指定什么,context中就返回什么
  • 以上,就是对于一个 Class Component,要使用老的contextAPI, 如何去提供这个context以及它如何去获取这个context的一个过程

  • 以上是 push 操作,那什么时候才会 pop 呢?

  • completeUnitOfWork 的时候,在 packages/react-reconciler/src/ReactFiberCompleteWork.js#L540

    function completeWork(
      current: Fiber | null,
      workInProgress: Fiber,
      renderExpirationTime: ExpirationTime,
    ): Fiber | null {
      const newProps = workInProgress.pendingProps;
      // ... 跳过很多代码
      switch (workInProgress.tag) {
        // ... 跳过很多代码
        case ClassComponent: {
          const Component = workInProgress.type;
          if (isLegacyContextProvider(Component)) {
            popLegacyContext(workInProgress);
          }
          break;
        }
        // ... 跳过很多代码
      }
      // ... 跳过很多代码
    }
    
    • 对于 classComponent,如果它是一个 provider,它必须要 popLegacyContext 别名是 popContext
      // packages/react-reconciler/src/ReactFiberContext.js#L124
      function popContext(fiber: Fiber): void {
        pop(didPerformWorkStackCursor, fiber);
        pop(contextStackCursor, fiber);
      }
      
      • 就把两个 cursor 给它 pop 一下
    • 在这里回到之前的push进行一下对比
      // packages/react-reconciler/src/ReactFiberContext.js#L215
      function pushContextProvider(workInProgress: Fiber): boolean {
        // ... 跳过很多代码
        push(contextStackCursor, memoizedMergedChildContext, workInProgress);
        push(
          didPerformWorkStackCursor,
          didPerformWorkStackCursor.current,
          workInProgress,
        );
      
        return true;
      }
      
      • 这里先push的是 contextStackCursor 再push的是 didPerformWorkStackCursor
    • 回到pop, 先pop的是 didPerformWorkStackCursor 再pop的是 contextStackCursor
    • 这就是我之前说过的,push 是按哪个顺序, pop的时候,必须要反过来去做
    • 这样的话,在 context-stack 中的 valueStack 里面存储的值对应的cursor的位置才是能真正对应起来
    • 对于在 completeWork 里面,我们只需要去执行 popLegacyContext 这个操作就可以了
  • 还是用之前的 Fiber 树来举例子

  • 假设整个树形结构下面的每一个节点,它都是一个classcomponent
  • 这个时候我们更新,然后 App 和 这个 div,它都提供了 childContextTypes
  • 这个时候对于 input 这个 classcomponent,它要更新的过程中肯定要获取
  • 这个App和和div提供的context合并之后的那个对象,对App更新的过程中,它调用了push
  • 然后在div执行更新的时候,它先去获取App push 的那个 context 作为它更新的时候要用的那个context
  • 它自己也要去push一个context,push的时候要跟App提供的context进行一个合并
  • 这个时候游标已经到了第二个context了, 第一个context是App提供的, 第二个是App和和div合并的
  • 这两个值都是在stack栈里面有存着的,只不过现在的 contextStackCursor 这个游标
  • 指向的是div它合并过之后的那个context,这个context是提供给Input渲染更新的时候,它要获取的那个值
  • 就这么一层一层下来之后,到最后更新 input 这个节点的时候,它拿到的context是上面这三个组件,它合并过的 context
  • 对于List的更新,它不需要Input合并进去,它只需要App和div它们合并之后的那个 context 对象
  • 这个就是我们在 completeUnitOfWork 的时候,要去pop这个stack
    • 在input节点执行 completeUnitOfWork 的时候
      • 要 pop input节点及以上提供的context合并之后的一个值
      • 对应 cursor 指向 App, div, Input 合并后的 context
    • 在Input节点执行 completeUnitOfWork 的时候
      • 要 pop Input节点及以上提供的context合并之后的一个值
      • 对应 cursor 指向 App 和 div 合并后的 context
    • 在Input发现sibling节点 List,要对这个兄弟节点执行 beginWork,也就是更新的流程
    • 这个时候 List 拿到的这个 context,也就是 App 和 div合并之后的节点
      • 所以这就是在 beginWork 的时候,要对 classcomponent 进行一个push的操作
      • 等到要去 completeUnitOfWork 的时候,执行到每个节点,要执行对应的pop
      • 所以这个时候就可以对节点 push 和 pop 的位置可以一一对应起来
      • 这样的话就不会造成整个stack里面的这个顺序混淆
  • 这就是对于 childContextTypes 这种context提供的方式的一个使用的过程
  • 这个 API 最终被删除了,因为前面谈到的性能问题,以上是它的整体原理

你可能感兴趣的:(React,React,Native,react.js,前端,前端框架)