React16源码: React中NewContext的源码实现

NewContext

1 ）概述

• 新的 context API 是一个组件化的使用方式
  • 它就跟写其他的组件一样，像写jsx，通过标签的这种方式来赋值一些props
  • 还有去给子节点去拿到这个 conntext 的属性
• context的提供方和订阅方都是独立的
  • 在什么地方想要用到这个 context
  • 就去声明式的写这个 consumer 就可以了
  • 而不需要说在这个子树的渲染过程当中
  • 都需要处于这个context的一个环境下面
• 没有什么附带的性能影响
• 主要关注源码中的 updateContextProvider 和 updateContextConsumer
  • 它们就是通过 createContext 返回的两个组件
  • 就是provider和consumer, 它们是一个组件的类型
  • 所以它们会有特定的组件的更新方式
• 而新的context-api都在 ReactFiberNewContext.js 中
  • 它提供的主要核心的两个api就是 pushProvider 以及 popProvider

2 ） 源码

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

function updateContextProvider(current: Fiber | null,workInProgress: Fiber,renderExpirationTime: ExpirationTime,
) {// 在这个更新的过程中，去获取了 workingprogress点type// 这个type就是我们通过createcontext返回的那个provider对象// 这个对象上面会有一个属性指向 consumer 那个typeconst providerType: ReactProviderType<any> = workInProgress.type; // 这里获得的就是 provider 组件const context: ReactContext<any> = providerType._context; // 这里获得的 context 就是 consumer// 拿到前后两个 propsconst newProps = workInProgress.pendingProps;const oldProps = workInProgress.memoizedProps;const newValue = newProps.value;// 跳过if (__DEV__) {const providerPropTypes = workInProgress.type.propTypes;if (providerPropTypes) {checkPropTypes(providerPropTypes,newProps,'prop','Context.Provider',ReactCurrentFiber.getCurrentFiberStackInDev,);}}// 注意这里pushProvider(workInProgress, newValue);if (oldProps !== null) {const oldValue = oldProps.value;const changedBits = calculateChangedBits(context, newValue, oldValue);if (changedBits === 0) {// 没有更新// No change. Bailout early if children are the same.if (oldProps.children === newProps.children &&!hasLegacyContextChanged()) {return bailoutOnAlreadyFinishedWork(current,workInProgress,renderExpirationTime,);}} else {// 存在更新// The context value changed. Search for matching consumers and schedule// them to update.propagateContextChange(workInProgress,context,changedBits,renderExpirationTime,);}}const newChildren = newProps.children;reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);return workInProgress.child;
}

• 关于 const context: ReactContext<any> = providerType._context;

  // packages/react/src/ReactContext.js#L53
  // 在 createContext 函数内
  context.Provider = {$$typeof: REACT_PROVIDER_TYPE,_context: context,
  };
  

• 进入 pushProvider

  // packages/react-reconciler/src/ReactFiberNewContext.js#L55
  export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {const context: ReactContext<T> = providerFiber.type._context;// isPrimaryRenderer 来自 ReactFiberHostConfig.js// 这个值在 dom环境中是 trueif (isPrimaryRenderer) {// 这个 valueCursor 记录的是 当前这个树下面一共经历了几个provider，它对应的值// consumer 也就是 context 它的 value 去获取，是通过赋制在它上面的这个 _currentValue 来进行一个获取的push(valueCursor, context._currentValue, providerFiber);// 所以, 这跟最终去获取这个 consumer 上面的 context 的时候，跟这个 valueCursor 是没有任何关系的context._currentValue = nextValue;if (__DEV__) {warningWithoutStack(context._currentRenderer === undefined ||context._currentRenderer === null ||context._currentRenderer === rendererSigil,'Detected multiple renderers concurrently rendering the ' +'same context provider. This is currently unsupported.',);context._currentRenderer = rendererSigil;}} else {push(valueCursor, context._currentValue2, providerFiber);context._currentValue2 = nextValue;if (__DEV__) {warningWithoutStack(context._currentRenderer2 === undefined ||context._currentRenderer2 === null ||context._currentRenderer2 === rendererSigil,'Detected multiple renderers concurrently rendering the ' +'same context provider. This is currently unsupported.',);context._currentRenderer2 = rendererSigil;}}
  }
  

• 进入 calculateChangedBits

  export function calculateChangedBits<T>(context: ReactContext<T>,newValue: T,oldValue: T,
  ) {// Use Object.is to compare the new context value to the old value. Inlined// Object.is polyfill.// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is// 使用这种方法可更准确判断两个值是否相等, 符合下面条件，被认为是全等的if ((oldValue === newValue &&(oldValue !== 0 || 1 / oldValue === 1 / (newValue: any))) ||(oldValue !== oldValue && newValue !== newValue) // eslint-disable-line no-self-compare) {// No change 没有变化return 0;} else {// 注意，这里 _calculateChangedBits 这个API未开放，直接忽略即可const changedBits =typeof context._calculateChangedBits === 'function'? context._calculateChangedBits(oldValue, newValue): MAX_SIGNED_31_BIT_INT;if (__DEV__) {warning((changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,'calculateChangedBits: Expected the return value to be a ' +'31-bit integer. Instead received: %s',changedBits,);}return changedBits | 0; // | 0 这里是去除小数部分}
  }
  

  • 上述 (oldValue !== 0 || 1 / oldValue === 1 / (newValue: any) 表示 -0 !== +0
  • 上述 oldValue !== oldValue && newValue !== newValue 表示 NAN !== NAN
  • 上述 MAX_SIGNED_31_BIT_INT 转换成2进制就是 32 位 的 1
  • 以上判断就是 除了全等就是 MAX_SIGNED_31_BIT_INT
• 进入 propagateContextChange

  export function propagateContextChange(workInProgress: Fiber,context: ReactContext<mixed>,changedBits: number,renderExpirationTime: ExpirationTime,
  ): void {// 拿到 当前 provider 的第一个子节点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.let dependency = fiber.firstContextDependency; // 读取这个属性// 存在，则进入循环if (dependency !== null) {do {// Check if the context matches.// changedBits 是32位的二进制数都是1// 只要 dependency.observedBits 不是0，dependency.observedBits & changedBits 就不是 0// dependency.context === context 表示遍历过程中的组件是依赖于这个当前的context的// 如果这个context的变化，那么说明它要重新渲染// 同时它去判断它提供的这个 observedBits 跟 changedBits 它们是有相交的部分的// 说明它依赖的部分也变化了, 通过这种方式判断这个组件其实是需要更新了if (dependency.context === context &&(dependency.observedBits & changedBits) !== 0) {// Match! Schedule an update on this fiber.// 这个组件如果需要更新，除非是他自己调用了setState来创建了一个更新// 不然的话没有外部的方式让他去可以更新这种情况// 因为我们在 beginWork 的时候开始是要判断每一个组件自己的 expirationTime 的// 如果那个组件它本身没有创建过更新，那么它的 expirationTime 是 nowork// 是nowork的话，它就直接跳过更新了，这明显不符合我们这边的一个context的一个需求// context这边它就遍历到这个节点的时候，发现它依赖这个context，如何更新？// 通过主动去创建 update，并且设置你的 update.tag 是 ForceUpdate// 这其实没有state的一个更新，但是你必须要更新// 因为依赖了这个context，context更新了，所以强制更新一下// 然后把这个update执行 enqueueUpdate 一下，这样的话// 在后续要更新到这个组件的时候，它就会发现它上面是有update的, 需要去更新它if (fiber.tag === ClassComponent) {// Schedule a force update on the work-in-progress.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 是不够的，还要对这个 fiber 它的 expirationTime 进行一个操作// 要看它，如果目前它的 expirationTime 的优先级是要大于我当前正在渲染这次 expirationTime 的// 那么我就把它的 expirationTime 设置为这次 update，让它在这次渲染过程当中，肯定会被更新到if (fiber.expirationTime < renderExpirationTime) {fiber.expirationTime = renderExpirationTime;}// 不仅要在这个 workingprogress 上面去设置，我还要对它的 alternate，也就是current也要进行一个设置// 因为这个东西它们应该是要被同步的let alternate = fiber.alternate;if (alternate !== null &&alternate.expirationTime < renderExpirationTime) {alternate.expirationTime = renderExpirationTime;}// Update the child expiration time of all the ancestors, including// the alternates.// 因为在这个过程当中给这个组件创建了一个update// 代表的意思是，我父链上面的每一个节点，它的 childExpirationTime 有可能会被改变// 同样的要执行一遍，类似于我们在 scheduleWorkToRoot 的时候的做的事情，就是设置它的 childExpirationTimelet node = fiber.return;while (node !== null) {alternate = node.alternate;if (node.childExpirationTime < renderExpirationTime) {node.childExpirationTime = renderExpirationTime;if (alternate !== null &&alternate.childExpirationTime < renderExpirationTime) {alternate.childExpirationTime = renderExpirationTime;}} else if (alternate !== null &&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.next; // 从这里可以看出 dependency 它也是可以有多个的} while (dependency !== null);} else if (fiber.tag === ContextProvider) {// Don't scan deeper if this is a matching providernextFiber = fiber.type === workInProgress.type ? null : fiber.child;} else {// Traverse down.nextFiber = fiber.child;}// 接下去和很多地方差不多的，就是它往子树上去找// 如果子树上没有了，它就往它的兄弟节点去找// 就是相当于要把我们的这个provider当前的这个组件，它的子树的每一个节点去遍历到// 并且找到有 firstContextDependency 这个属性的这些节点// 给它去创建更新的一个过程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;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;}
  }
  

  • 关于 firstContextDependency
    • 在 packages/react-reconciler/src/ReactFiberBeginWork.js#L1415 中的 updateContextConsumer 函数中
      • 调用了 prepareToReadContext 函数, 在这个函数中 workInProgress.firstContextDependency = null;
    • 接下去调用了 readContext 获取到 newValue
      • 在 lastContextDependency 为 null 的时候
        • 设置了 currentlyRenderingFiber.firstContextDependency = lastContextDependency = contextItem;
      • 这是第一次进来的逻辑，对于 consumer 的情况已经够了，只会调这么一次，一个consumer 对应一个 provider 的，只会有一个context
      • 这里面有很多变量控制和单项链表的数据结构来进行存储不同的 context
      • 猜测是为了实现支持 hooks 的环境里面，一个 function component里面是可以读取多个context的使用的
      • 就是 useContext 这个API, 读取多个context，说明这个function component是依赖于多个context provider
      • 那么这个时候我们就要在这个 firstcontextdependency 上面去设置一个链表了
      • 能够让我们在有多个context的情况下，每个context变化都能让这个function component去执行一次更新
      • 后续的contextitem直接设置为当前的这个next
      • 因为这个contextItem里面是有个next的指针的指向一个它依赖的context就可以了
    • 拿到 newValue 之后，调用 render 拿到 newChildren
    • 之后，reconcileChildren 就完成了，这就是 consumer 的一个更新过程
  • 注意，在之前的 packages/react-reconciler/src/ReactFiberClassComponent.js#L997 里面
    • const contextType = ctor.contextType; 声明了一个叫做 contextType 的这么一个属性
    • 这个属性拿到之后，就可以去 readContext
  • 对于 updateClassComponent packages/react-reconciler/src/ReactFiberBeginWork.js#L428
    • 也会调用 prepareToReadContext
    • 所以对于 class component 这个fiber对象，也会给它设置 firstContextDependency 这个属性的
  • 这就是在 propagateContextChange 这个方法里面可以看到
    • 它只有对于class component它才会去创建一个update
    • 对于consumer它是不会去创建update的，因为consumer它不是update的一个载体
    • 我们只需需要给它设置 expirationTime 就可以了, 不需要给它建update来告诉它，我需要 forceUpdate
    • 因为在 consumer 中如果需要更新，就会执行更新的流程
    • 它没有像 class component，可以通过 scu 这种方式的规避一个组件的更新的流程

总结

• 以上就是新的context API它的一个实现过程
• 最主要的就是通过去更新 provider 的时候，给这个context它的 _currentValue 设置了一个值
• 设置的这个值就是新的context，它提供的这个value，以此让我们的consumer可以去获取到这个值
• 可以看到它 readcontext 的时候，最后是有一句代码的
• return isPrimaryRenderer ? context._currentValue : context._currentValue2;
• 这个才是真正返回值的情况, 前面是处理它这个context的依赖
• 对于 provider 更新了之后，如何去通知一个consumer依赖的那个组件
• 通过手动的去遍历它的所有子节点, 然后去给它指定它的 expirationTime，告诉后续的更新的流程里面
• 这个依赖于我的context，所以它需要去更新
• 而且对于 class component，要单独为它去创建一个update
• 这就是 provider 和 consumer 这种新的 context API 它的一个实现过程