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

// 要去推入 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 effectworkInProgress.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 falsemarkRef(current, workInProgress);const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;if (!shouldUpdate && !didCaptureError) {// Context providers should defer to sCU for renderingif (hasContext) {invalidateContextProvider(workInProgress, Component, false);}return bailoutOnAlreadyFinishedWork(current,workInProgress,renderExpirationTime,);}const instance = workInProgress.stateNode;// RerenderReactCurrentOwner.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,);}// 最终是两者 mergereturn {...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 上面去读取这个属性

• 注意，这里 contextType 和 contextTypes 的区别

  • 后者在应用中，我们自己的代码里用于设定接收上层属性的
  • 前者就是要去读取某一个新的 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 最终被删除了，因为前面谈到的性能问题，以上是它的整体原理