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

本文主要是介绍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 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 最终被删除了，因为前面谈到的性能问题，以上是它的整体原理