context

stack 概念

更新节点时（beginWork）相关信息入栈
完成节点时（completeUnitOfWork）相关信息出栈
用不同的 cursor 记录不同的信息
对 cursor 的操作: 入栈的时候设置 cursor.current 为新的值，出栈的时候设置 cursor.current 为上一个值

// ReactFiberStack.js

// 所有值存储的数组
const valueStack: Array<any> = [];
let index = -1;

function createCursor<T>(defaultValue: T): StackCursor<T> {
  return {
    current: defaultValue,
  };
}

function isEmpty(): boolean {
  return index === -1;
}

// 入栈
function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
  // index 累加
  index++;

  valueStack[index] = cursor.current;

  // 新的 value 不会推入栈
  cursor.current = value;
}

// 出栈
function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
  if (index < 0) {
    return;
  }

  // 老的值赋值出来
  cursor.current = valueStack[index];
  // 清空 index 位置的值
  valueStack[index] = null;
  // 累减
  index--;
}

react 中有三种 cursor
- 老 context
- contextStackCursor: 记录当前组件和父组件一起提供给子组件的 childContext 对象，默认是 {}
- didPerformWorkStackCursor: 标记子树的 context 是否变化的， false 表示可以跳过更新，记录的值其实是 shouldUpdate
- valueCursor: 新 context 的 cursor

// ReactFiberContext.js
// 老 context 的两种 cursor
const emptyContextObject = {};
// A cursor to the current merged context object on the stack.
let contextStackCursor: StackCursor<Object> = createCursor(emptyContextObject);
// A cursor to a boolean indicating whether the context has changed.
let didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);

// ReactFiberNewContext.js
// 新 context cursor
const valueCursor: StackCursor<mixed> = createCursor(null);

LegacyContext 老版本的 context

父组件提供 getChildContext 方法、声明 childContextTypes 属性，子组件声明 contextTypes 属性的方式获取 context 的问题

会影响整个子树，影响性能
嵌套的 context provider 会合并 key 相同的属性
只有 classComponent 才能使用 getChildContext 方法给子树提供 childContext

updateHostRoot 对 FiberRoot 会执行第一次 context push，

function updateHostRoot(current, workInProgress, renderExpirationTime) {
  pushHostRootContext(workInProgress);
  // ...
}

function pushHostRootContext(workInProgress) {
  const root = (workInProgress.stateNode: FiberRoot);
  // 初次渲染如果有 pendingContext
  if (root.pendingContext) {
    pushTopLevelContextObject(
      workInProgress,
      root.pendingContext,
      root.pendingContext !== root.context,
    );
  } else if (root.context) {
    // Should always be set
    // 除了初次渲染 push 的值是 false，表明目前 context 没有变化
    pushTopLevelContextObject(workInProgress, root.context, false);
  }
  pushHostContainer(workInProgress, root.containerInfo);
}

function pushTopLevelContextObject(
  fiber: Fiber,
  context: Object,
  didChange: boolean,
): void {
  push(contextStackCursor, context, fiber);
  push(didPerformWorkStackCursor, didChange, fiber);
}

之后只有 classComponent 能提供 childContext, 在 updateClassComponent 中 push 子树的 context 对象，

// 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;
  // 判断是否是老 context 方式提供 context ，如果是，则 push，并将hasContext 置为 true ，在 finishClassComponent 中会用到
  if (isLegacyContextProvider(Component)) {
    hasContext = true;
    pushLegacyContextProvider(workInProgress);
  } else {
    hasContext = false;
  }
  // 新的 context 相关
  prepareToReadContext(workInProgress, renderExpirationTime);

  // ...
}

function isContextProvider(type: Function): boolean {
  const childContextTypes = type.childContextTypes;
  return childContextTypes !== null && childContextTypes !== undefined;
}

pushContextProvider

进入 updateComponentClass 时首先 push 一次老的 context
将全局变量 previousContext 赋值为 contextStackCursor.current 即上一次 push 的值，这个值记录着父组件提供的 context 的集合
在进入 updateComponentClass 时并不知道组件是否需要更新，并不知道是否有新的 contetxt

只有在 finishClassComponent 中判断如果组件需要更新了，会重新计算新的 context，执行 invalidateContextProvider 将计算过后的 mergedContext 挂载在 __reactInternalMemoizedMergedChildContext 属性上

//
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.
// 上一次 push 时的值，即对应父组件的 context
previousContext = contextStackCursor.current;
push(contextStackCursor, memoizedMergedChildContext, workInProgress);
push(
didPerformWorkStackCursor,
didPerformWorkStackCursor.current,
workInProgress,
);

return true;
}

invalidateContextProvider

finishClassComponent 中如果不需要更新且没有错误则跳过更新，并且如果 hasContext 为 true 则会执行 invalidateContextProvider，这里 didChange 是 false，即对应 push 的 didPerformWorkStackCursor 值为 false，表示组件可以跳过更新，在往下执行子树的 beginWork 时就会根据 !hasContextChanged() 判断是否可以跳过更新
finishClassComponent 如果组件需要更新，也会执行 invalidateContextProvider，这里 didChange 为 true
PureComponent 不会判断 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 // updateClassComponent 中使用了老 context 后会赋值为 true // didChange 为 false if (hasContext) { invalidateContextProvider(workInProgress, Component, false); } // 跳过更新 return bailoutOnAlreadyFinishedWork( current, workInProgress, renderExpirationTime, ); } // ... if (hasContext) { invalidateContextProvider(workInProgress, Component, true); }

return workInProgress.child; }

// invalidateContextProvider

function invalidateContextProvider( workInProgress: Fiber, type: any, didChange: boolean, // 组件是否有更新 ): void { const instance = workInProgress.stateNode;

// 组件需要更新 if (didChange) { // Merge parent and own context. // Skip this if we're not updating due to sCU. // This avoids unnecessarily recomputing memoized values. // 重新计算新的合并过的 context，(会合并父组件的 context ) const mergedContext = processChildContext( workInProgress, type, previousContext, // 上一次 push 的 context 的值 ); // 挂载到 reactInternalMemoizedMergedChildContext 属性上 instance.reactInternalMemoizedMergedChildContext = mergedContext;

// Replace the old (or empty) context with the new one.
// It is important to unwind the context in the reverse order.
// finishClassComponent 之前在 updateClassComponent 的时候 push 了一次老的，如果有更新，需要将老的 pop
pop(didPerformWorkStackCursor, workInProgress);
pop(contextStackCursor, workInProgress);
// Now push the new context and mark that it has changed.
// 再 push 新计算出来的 context
push(contextStackCursor, mergedContext, workInProgress);
push(didPerformWorkStackCursor, didChange, workInProgress);

} else { // 没有更新，有没有更新都需要将 didPerformWorkStackCursor.current 同步 didChange，如果不同步 false 的情况那组件 beginWork 时会一直更新，没有可以跳过更新的情况 // pop 老的 pop(didPerformWorkStackCursor, workInProgress); // push 新的 // 仍需要 push didChange 将 didPerformWorkStackCursor.current = false push(didPerformWorkStackCursor, didChange, workInProgress); } }


####  processChildContext
- 合并父组件的 `context` ，相同 `key` 属性会被覆盖
```js
function processChildContext(
  fiber: Fiber,
  type: any,
  parentContext: Object, // 全局变量 previousContext
): 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.
  // 如果没有 getChildContext 方法就直接返回父组件的 context
  if (typeof instance.getChildContext !== 'function') {

    return parentContext;
  }

  let childContext;
  // 获取新的 context
  childContext = instance.getChildContext();

  // 合并 context
  return {...parentContext, ...childContext};
}

hasContextChanged

beginWork 开始时会调用这个方法根据 context 是否变化来判断是否可以跳过组件更新，这也是影响性能的一个地方
!hasLegacyContextChanged() 即为 false 时跳过更新，这个值实际存储的是 didChange，跟 shouldComponentUpdate 有关

没有 context 变化，各个类型的组件分别 push context


function hasContextChanged(): boolean {
return didPerformWorkStackCursor.current;
}

// beginWork function beginWork( current: Fiber | null, workInProgress: Fiber, renderExpirationTime: ExpirationTime, ): Fiber | null { const updateExpirationTime = workInProgress.expirationTime;

// 非首次渲染 if (current !== null) { const oldProps = current.memoizedProps; const newProps = workInProgress.pendingProps; if ( oldProps === newProps && // 新老 props 相等 !hasLegacyContextChanged() && // 父组件的 context 没有变化 (updateExpirationTime === NoWork || updateExpirationTime > renderExpirationTime) ) { // This fiber does not have any pending work. Bailout without entering // the begin phase. There's still some bookkeeping we that needs to be done // in this optimized path, mostly pushing stuff onto the stack. switch (workInProgress.tag) { case HostRoot: pushHostRootContext(workInProgress); resetHydrationState(); break; case HostComponent: pushHostContext(workInProgress); break; case ClassComponent: { const Component = workInProgress.type; // 有 childContextTypes 属性 if (isLegacyContextProvider(Component)) { // 入栈 pushLegacyContextProvider(workInProgress); } break; } case HostPortal: pushHostContainer( workInProgress, workInProgress.stateNode.containerInfo, ); break; case ContextProvider: { const newValue = workInProgress.memoizedProps.value; pushProvider(workInProgress, newValue); break; } case Profiler: if (enableProfilerTimer) { workInProgress.effectTag |= Update; } break; case SuspenseComponent: { // ... break; } } // 跳过更新 return bailoutOnAlreadyFinishedWork( current, workInProgress, renderExpirationTime, ); } } // .... }


### completeWork 中 pop context
- `popContext`: `pop` 的顺序和 `push` 时相反，最后 `push` 的 `didPerformWorkStackCursor` 先 `pop`，确保从 `valueStack` 中取值正确
```js
function completeWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): Fiber | null {
  const newProps = workInProgress.pendingProps;

  switch (workInProgress.tag) {
    case IndeterminateComponent:
      break;
    case LazyComponent:
      break;
    case SimpleMemoComponent:
    case FunctionComponent:
      break;
    case ClassComponent: {
      const Component = workInProgress.type;
      if (isLegacyContextProvider(Component)) {
        popLegacyContext(workInProgress);
      }
      break;
    }
    // ....
  }
  // ...
}

// popLegacyContext => popContext

function popContext(fiber: Fiber): void {
  pop(didPerformWorkStackCursor, fiber);
  pop(contextStackCursor, fiber);
}

子组件从父组件提供的 context 对象里获取需要的属性

getUnmaskedContext 获取合并过的 context
getMaskedContext 从 getUnmaskedContext 的结果里取需要的属性

// updateFunctionComponent
function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderExpirationTime,
) {

  const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
  const context = getMaskedContext(workInProgress, unmaskedContext);

  let nextChildren;
  prepareToReadContext(workInProgress, renderExpirationTime);
  // ...
  return workInProgress.child;
}

// updateClassInstance
function updateClassInstance(
  current: Fiber,
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderExpirationTime: ExpirationTime,
): boolean {
  const instance = workInProgress.stateNode;

  const oldProps = workInProgress.memoizedProps;
  instance.props = oldProps;

  const oldContext = instance.context;
  // 新的 context api 使用方式
  const contextType = ctor.contextType;
  let nextContext;
  if (typeof contextType === 'object' && contextType !== null) {
    nextContext = readContext(contextType);
  } else {
    // 老的 context
    // 组件自己声明的 contextTypes 是给组件的子节点用的，自己要使用 context 来更新，应该用 parent 提供的 context，即 previousContext
    // 如果自己也是 context provider，且已经 push 过一次了，这里应该读 previousContext
    const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
    // 子组件从父组件合并过后的 context 中选择性属性
    nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);
  }
  // ...
}

getUnmaskedContext

function getUnmaskedContext(
  workInProgress: Fiber,
  Component: Function,
  didPushOwnContextIfProvider: boolean, // 读 context 一般都为 true
): Object {
  // 如果自己也是 context provider，且已经 push 过一次了，这里应该读 previousContext
  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;
  }
  // 不是 provider 则读当前的 cursor 就可以
  // 或者 mountIndeterminateComponent 函数里 didPushOwnContextIfProvider 为 false
  return contextStackCursor.current;
}

getMaskedContext

从 context 中获取组件声明的 contextTypes 中需要的数据

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 = {};
  // 根据 contextTypes 上声明的 key 读取父组件合并过后的 context 中的值
  for (let key in contextTypes) {
    context[key] = unmaskedContext[key];
  }

  // 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.
  // 缓存 context
  if (instance) {
    cacheContext(workInProgress, unmaskedContext, context);
  }

  return context;
}

// 缓存
function cacheContext(
  workInProgress: Fiber,
  unmaskedContext: Object,
  maskedContext: Object,
): void {
  const instance = workInProgress.stateNode;
  instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;
  instance.__reactInternalMemoizedMaskedChildContext = maskedContext;
}

新 context

组件化的使用方式 Context.Provider Context.Consumer
context 的提供方和订阅方都是独立的
没有附带的性能影响

ReactContext

创建 context，并创建 Provider 组件类型，Consumer组件类型即创建的 context

ContextConsumer = REACT_CONTEXT_TYPE;

function createContext<T>(
defaultValue: T,
calculateChangedBits: ?(a: T, b: T) => number,
): ReactContext<T> {

const context: ReactContext<T> = {
$$typeof: REACT_CONTEXT_TYPE,
_calculateChangedBits: calculateChangedBits,
// As a workaround to support multiple concurrent renderers, we categorize
// some renderers as primary and others as secondary. We only expect
// there to be two concurrent renderers at most: React Native (primary) and
// Fabric (secondary); React DOM (primary) and React ART (secondary).
// Secondary renderers store their context values on separate fields.
_currentValue: defaultValue,
_currentValue2: defaultValue,
// These are circular
Provider: (null: any),
Consumer: (null: any),
};

context.Provider = {
$$typeof: REACT_PROVIDER_TYPE,
_context: context,
};

let hasWarnedAboutUsingNestedContextConsumers = false;
let hasWarnedAboutUsingConsumerProvider = false;

if (__DEV__) {
// ....
} else {
context.Consumer = context;
}

if (__DEV__) {
context._currentRenderer = null;
context._currentRenderer2 = null;
}

return context;
}

updateContextProvider

pushProvider 的时候设置 context._currentValue = nextValue; 最后 consumer 是从这个值中读取的
```
// beginWork
```

case ContextProvider: return updateContextProvider( current, workInProgress, renderExpirationTime, );

function updateContextProvider( current: Fiber | null, workInProgress: Fiber, renderExpirationTime: ExpirationTime, ) { const providerType: ReactProviderType = workInProgress.type; // _context 指向创建的 context 对象（也是 Consumer） const context: ReactContext = providerType._context;

const newProps = workInProgress.pendingProps; const oldProps = workInProgress.memoizedProps;

const newValue = newProps.value; // push 新的 value pushProvider(workInProgress, newValue);

if (oldProps !== null) { const oldValue = oldProps.value; // 模拟 Object.is // 如果 newValue, oldValue 相等返回 0 // 如果不相等则返回 MAX_SIGNED_31_BIT_INT const changedBits = calculateChangedBits(context, newValue, oldValue); if (changedBits === 0) { // No change. Bailout early if children are the same. if ( oldProps.children === newProps.children && !hasLegacyContextChanged() ) { // newValue, oldValue相等且新老 children 相同，且没有老 context变化的条件下，可以跳过更新 return bailoutOnAlreadyFinishedWork( current, workInProgress, renderExpirationTime, ); } } else { // The context value changed. Search for matching consumers and schedule // them to update. // 有更新，则遍历子节点对有 firstContextDependency 的 classComponent 类型的节点创建一个 forceUpdate 的更新 propagateContextChange( workInProgress, context, changedBits, renderExpirationTime, ); } }

const newChildren = newProps.children; // 调和子节点 reconcileChildren(current, workInProgress, newChildren, renderExpirationTime); return workInProgress.child; }


#### pushProvider

```js
function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
  // context 对象
  const context: ReactContext<T> = providerFiber.type._context;

  // ReactDOM 下 isPrimaryRenderer 为 true
  if (isPrimaryRenderer) {
    // push valueCursor 值为 context._currentValue
    // valueCursor 记录的是当前这棵树下面一共经历了几个 provider 对应的值
    push(valueCursor, context._currentValue, providerFiber);
  // consumer 读取值是从 context._currentValue 读取的，与 v alueCursor 无关
    context._currentValue = nextValue;
  } else {
  }
}

propagateContextChange

更新 Provider 组件
遍历子树的每个一个节点，找到有 firstContextDependency 的节点，如果节点依赖的 context 有更新（非 setState 的更新），对于 classComponent 类型主动创建一个 tag 为 forceUpdate 的 update 来强制更新，并操作 expirationTime 和父节点的 childExpirationTime

firstContextDependency 是在 updateContextConsumer 中 prepareToReadContext 方法初始化，在 readContext 中被赋值

function propagateContextChange(
workInProgress: Fiber,
context: ReactContext<mixed>,
changedBits: number,
renderExpirationTime: ExpirationTime,
): void {
// 第一个子节点
let fiber = workInProgress.child;
if (fiber !== null) {
// Set the return pointer of the child to the work-in-progress fiber.
fiber.return = workInProgress;
}
while (fiber !== null) {
let nextFiber;

// Visit this fiber.
// firstContextDependency 这个属性在 updaterConsumer、 updateClassComponent、updateFunctionComponent 中的 prepareToReadContext 中被初始化
let dependency = fiber.firstContextDependency;
if (dependency !== null) {
  do {
    // Check if the context matches.
    if (
      // 表示遍历过程中的这个组件依赖于 context，如果 context 变化则需要重新渲染
      dependency.context === context &&
      // dependency.observedBits 只要不是 0 则 这个条件为真， 在 updateContextConsumer 中一般默认设置为 MAX_SIGNED_31_BIT_INT
      // changedBits 有变化的情况则值为 MAX_SIGNED_31_BIT_INT
      // 同时 dependency.observedBits 和 changedBits 有相交的部分则说明依赖的部分也变化了
      (dependency.observedBits & changedBits) !== 0
    ) {
      // 满足以上条件，组件需要更新
      // Match! Schedule an update on this fiber.

      if (fiber.tag === ClassComponent) {
        // Schedule a force update on the work-in-progress.
        // context 更新，但没有 setState 的创建 update ，则主动创建一个 update，tag 为 ForceUpdate 强制更新
        const update = createUpdate(renderExpirationTime);
        update.tag = ForceUpdate;
        // TODO: Because we don't have a work-in-progress, this will add the
        // update to the current fiber, too, which means it will persist even if
        // this render is thrown away. Since it's a race condition, not sure it's
        // worth fixing.
        enqueueUpdate(fiber, update);
      }
      // 创建 update 的同时，操作 expirationTime
      if (
        fiber.expirationTime === NoWork ||
        fiber.expirationTime > renderExpirationTime // 节点的更新优先级低于当前更新的优先级
      ) {
        // 则重新赋值节点的expirationTime 保证在这一次更新中能更新到
        fiber.expirationTime = renderExpirationTime;
      }
      let alternate = fiber.alternate;
      // 同步 alternate
      if (
        alternate !== null &&
        (alternate.expirationTime === NoWork ||
          alternate.expirationTime > renderExpirationTime)
      ) {
        alternate.expirationTime = renderExpirationTime;
      }
      // Update the child expiration time of all the ancestors, including
      // the alternates.
      //  同步父节点的 childExpirationTime
      let node = fiber.return;
      while (node !== null) {
        alternate = node.alternate;
        if (
          node.childExpirationTime === NoWork ||
          node.childExpirationTime > renderExpirationTime
        ) {
          node.childExpirationTime = renderExpirationTime;
          if (
            alternate !== null &&
            (alternate.childExpirationTime === NoWork ||
              alternate.childExpirationTime > renderExpirationTime)
          ) {
            alternate.childExpirationTime = renderExpirationTime;
          }
        } else if (
          alternate !== null &&
          (alternate.childExpirationTime === NoWork ||
            alternate.childExpirationTime > renderExpirationTime)
        ) {
          alternate.childExpirationTime = renderExpirationTime;
        } else {
          // Neither alternate was updated, which means the rest of the
          // ancestor path already has sufficient priority.
          break;
        }
        node = node.return;
      }
    }
    nextFiber = fiber.child;
    // dependency 也是单链表结构
    dependency = dependency.next;
  } while (dependency !== null);
} else if (fiber.tag === ContextProvider) {
  // Don't scan deeper if this is a matching provider
  nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
} else {
  // 往 child 找
  // Traverse down.
  nextFiber = fiber.child;
}
// 遍历子树的每个一个节点，找到有 firstContextDependency 的然后对它创建 update
if (nextFiber !== null) {
  // Set the return pointer of the child to the work-in-progress fiber.
  nextFiber.return = fiber;
} else {
  // No child. Traverse to next sibling.
  nextFiber = fiber;
  // 如果没有 child 则往兄弟节点找
  while (nextFiber !== null) {
    if (nextFiber === workInProgress) {
      // We're back to the root of this subtree. Exit.
      nextFiber = null;
      break;
    }
    let sibling = nextFiber.sibling;
    if (sibling !== null) {
      // Set the return pointer of the sibling to the work-in-progress fiber.
      sibling.return = nextFiber.return;
      nextFiber = sibling;
      break;
    }
    // No more siblings. Traverse up.
    nextFiber = nextFiber.return;
  }
}
fiber = nextFiber;
}
}

updateContextConsumer

workInProgress.type 即 createContext 返回的 context 对象
prepareToReadContext 初始化 firstContextDependency，赋值全局变量 currentlyRenderingFiber 为当前 workInProgress
```
case ContextConsumer:
return updateContextConsumer(
current,
workInProgress,
renderExpirationTime,
);
```

function updateContextConsumer( current: Fiber | null, workInProgress: Fiber, renderExpirationTime: ExpirationTime, ) { let context: ReactContext = workInProgress.type; const newProps = workInProgress.pendingProps; // consumer 的 children 为一个函数，这个函数的参数即 provider 提供的 value const render = newProps.children;

// 初始化 currentlyRenderingFiber 、workInProgress.firstContextDependency prepareToReadContext(workInProgress, renderExpirationTime); // 读取 context._currentValue ， const newValue = readContext(context, newProps.unstable_observedBits); let newChildren; if (DEV) { // ... } else { // 调用 render 获取children newChildren = render(newValue); }

// React DevTools reads this flag. workInProgress.effectTag |= PerformedWork; // 调和子节点 reconcileChildren(current, workInProgress, newChildren, renderExpirationTime); return workInProgress.child; }


#### prepareToReadContext
- 往当前 `fiber` 上添加 `firstContextDependency` 属性，值为 `null`
- 设置全局变量 `currentlyRenderingFiber` 为当前 `fiber` 节点
- 设置全局变量 `lastContextDependency` 值为 `null`，用于构建单链表结构

```js
function prepareToReadContext(
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): void {
  currentlyRenderingFiber = workInProgress;
  lastContextDependency = null;
  lastContextWithAllBitsObserved = null;

  // Reset the work-in-progress list
  workInProgress.firstContextDependency = null;
}

readContext

构建 firstContextDependency 到 lastContextDependency 的单链表结构
获取 context._currentValue 做为 context

function readContext<T>(
  context: ReactContext<T>,
  observedBits: void | number | boolean, // => undefined
): T {
  // 首次进入这个函数 lastContextWithAllBitsObserved 为 null
  if (lastContextWithAllBitsObserved === context) {
    // Nothing to do. We already observe everything in this context.
    // unstable_observedBits 目前版本下为 undefined
  } else if (observedBits === false || observedBits === 0) {
    // Do not observe any updates.
  } else {
    let resolvedObservedBits; // Avoid deopting on observable arguments or heterogeneous types.
    if (
      typeof observedBits !== 'number' ||
      observedBits === MAX_SIGNED_31_BIT_INT
    ) {
      // Observe all updates.
      // 赋值 lastContextWithAllBitsObserved 为当前 context
      lastContextWithAllBitsObserved = ((context: any): ReactContext<mixed>);
      // 赋值 resolvedObservedBits ，
      resolvedObservedBits = MAX_SIGNED_31_BIT_INT;
    } else {
      resolvedObservedBits = observedBits;
    }

    let contextItem = {
      context: ((context: any): ReactContext<mixed>),
      // 这个值即在 updateContextProvider 中的 propagateContextChange 函数中判断 (dependency.observedBits & changedBits) !== 0
      observedBits: resolvedObservedBits,
      next: null,
    };

    if (lastContextDependency === null) {
      // This is the first dependency in the list
      // 构建 firstContextDependency 到 lastContextDependency 的 单链表结构
      currentlyRenderingFiber.firstContextDependency = lastContextDependency = contextItem;
    } else {
      // Append a new context item.
      lastContextDependency = lastContextDependency.next = contextItem;
    }
  }
  // ReactDOM 下 isPrimaryRenderer 为 true，直接返回 context._currentValue
  return isPrimaryRenderer ? context._currentValue : context._currentValue2;
}

updateFunctionComponent、updateClassComponent 也会执行 prepareToReadContext 这个方法，对于 classComponent 组件还可以声明 contextType 的方法来获取新 context，在 constructClassInstance、mountClassInstance、resumeMountClassInstance、updateClassInstance 方法中会判断 contextType 是否存在，如果存在则在赋值 instance.context = readContext(contextType)，从而能在声明周期方法里通过 this.context 获取 context

// prepareToReadContext

function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderExpirationTime,
) {
  const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
  const context = getMaskedContext(workInProgress, unmaskedContext);

  let nextChildren;
  prepareToReadContext(workInProgress, renderExpirationTime);
  //....
}

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;
  }
  // 新的 context 相关， 设置 workInProgress.firstContextDependency 为null
  prepareToReadContext(workInProgress, renderExpirationTime);

  // ....
}

// readContext
function constructClassInstance(
  workInProgress: Fiber,
  ctor: any,
  props: any,
  renderExpirationTime: ExpirationTime,
): any {
  let isLegacyContextConsumer = false;
  let unmaskedContext = emptyContextObject;
  let context = null;
  const contextType = ctor.contextType;
  if (typeof contextType === 'object' && contextType !== null) {
    // 新 context 获取方式
    context = readContext((contextType: any));
  } else {
    unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
    const contextTypes = ctor.contextTypes;
    isLegacyContextConsumer =
      contextTypes !== null && contextTypes !== undefined;
    context = isLegacyContextConsumer
      ? getMaskedContext(workInProgress, unmaskedContext)
      : emptyContextObject;
  }
    // 往 instance 上挂载 context
    const instance = new ctor(props, context);
    // ....
}

function mountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderExpirationTime: ExpirationTime,
): void {
  if (__DEV__) {
    checkClassInstance(workInProgress, ctor, newProps);
  }

  const instance = workInProgress.stateNode;
  instance.props = newProps;
  instance.state = workInProgress.memoizedState;
  instance.refs = emptyRefsObject;

  const contextType = ctor.contextType;
  if (typeof contextType === 'object' && contextType !== null) {
    // 挂载 context
    instance.context = readContext(contextType);
  } else {
    const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
    instance.context = getMaskedContext(workInProgress, unmaskedContext);
  }
}

function resumeMountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderExpirationTime: ExpirationTime,
): boolean {
  const instance = workInProgress.stateNode;

  const oldProps = workInProgress.memoizedProps;
  instance.props = oldProps;

  const oldContext = instance.context;
  const contextType = ctor.contextType;
  let nextContext;
  if (typeof contextType === 'object' && contextType !== null) {
    // 挂载 context
    nextContext = readContext(contextType);
  } else {
    const nextLegacyUnmaskedContext = getUnmaskedContext(
      workInProgress,
      ctor,
      true,
    );
    nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);
  }
}

lz-lee / React-Source-Code

context #13