摘要：我們只希望最多有兩個(gè)并發(fā)渲染器主要和次要主要和次要。輔助渲染器將自己的的存儲(chǔ)在多帶帶的字段中。

前言：
由于childContext在React17中會(huì)被廢棄，所以不去分析它了，主要是新 API— —createContext()的講解

一、React.createContext()

作用：
方便祖先組件與后代組件（中間隔了好多層組件）傳值

使用：
context.js：

import React from "react";

const contextTestOne={
  name:"chen",
  length:22,
}

export const wrapContext=React.createContext(contextTestOne.name)

祖先組件：

import { wrapContext } from "@/utils/context";

const Father=props=>{
  return (
     
)
}

子孫組件：

import { wrapContext } from "@/utils/context";

const getProviderValue=()=>{
  return {value=>{value}}
}

const Child=props=>{
return (
    getProviderValue()
  );
}

結(jié)果：

注意：
將undefined傳遞給的value時(shí)，createContext中的defaultValue不會(huì)生效，Consumer的value顯示空值

React 官方文檔：
https://zh-hans.reactjs.org/docs/context.html#contextprovider

源碼：

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from "shared/ReactSymbols";

import type {ReactContext} from "shared/ReactTypes";

import warningWithoutStack from "shared/warningWithoutStack";
import warning from "shared/warning";

export function createContext(
  defaultValue: T,
  //使用Object.is()計(jì)算新老context的差異
  calculateChangedBits: ?(a: T, b: T) => number,
): ReactContext {
  if (calculateChangedBits === undefined) {
    calculateChangedBits = null;
  } else {
    //不看
    if (__DEV__) {
      warningWithoutStack(
        calculateChangedBits === null ||
          typeof calculateChangedBits === "function",
        "createContext: Expected the optional second argument to be a " +
          "function. Instead received: %s",
        calculateChangedBits,
      );
    }
  }

  const context: ReactContext = {
    //還是那句話，ReactContext中的$$typeof是
    // 作為createElement中的屬性type中的對(duì)象進(jìn)行存儲(chǔ)的，并不是ReactElement的$$typeof
    $$typeof: REACT_CONTEXT_TYPE,
    _calculateChangedBits: calculateChangedBits,
    //作為支持多個(gè)并發(fā)渲染器的解決方法，我們將一些渲染器分類為主要渲染器，將其他渲染器分類為輔助渲染器。
    // As a workaround to support multiple concurrent renderers, we categorize
    // some renderers as primary and others as secondary.

    //我們只希望最多有兩個(gè)并發(fā)渲染器：React Native（主要）和Fabric（次要）;
    // React DOM（主要）和React ART（次要）。
    // 輔助渲染器將自己的context的value存儲(chǔ)在多帶帶的字段中。
    // 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.

    //中的value就是賦值給_currentValue的

    //也就是說(shuō)_currentValue和_currentValue2作用是一樣的，只是分別給主渲染器和輔助渲染器使用
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    // Used to track how many concurrent renderers this context currently
    // supports within in a single renderer. Such as parallel server rendering.

    //用來(lái)追蹤該context的并發(fā)渲染器的數(shù)量
    _threadCount: 0,
    // These are circular
    Provider: (null: any),
    Consumer: (null: any),
  };
  //const obj={}
  //obj.provider._obj = obj
  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE,
    _context: context,
  };

  let hasWarnedAboutUsingNestedContextConsumers = false;
  let hasWarnedAboutUsingConsumerProvider = false;
  //不看
  if (__DEV__) {
    // A separate object, but proxies back to the original context object for
    // backwards compatibility. It has a different $$typeof, so we can properly
    // warn for the incorrect usage of Context as a Consumer.
    const Consumer = {
      $$typeof: REACT_CONTEXT_TYPE,
      _context: context,
      _calculateChangedBits: context._calculateChangedBits,
    };
    // $FlowFixMe: Flow complains about not setting a value, which is intentional here
    Object.defineProperties(Consumer, {
      Provider: {
        get() {
          if (!hasWarnedAboutUsingConsumerProvider) {
            hasWarnedAboutUsingConsumerProvider = true;
            warning(
              false,
              "Rendering  is not supported and will be removed in " +
                "a future major release. Did you mean to render  instead?",
            );
          }
          return context.Provider;
        },
        set(_Provider) {
          context.Provider = _Provider;
        },
      },
      _currentValue: {
        get() {
          return context._currentValue;
        },
        set(_currentValue) {
          context._currentValue = _currentValue;
        },
      },
      _currentValue2: {
        get() {
          return context._currentValue2;
        },
        set(_currentValue2) {
          context._currentValue2 = _currentValue2;
        },
      },
      _threadCount: {
        get() {
          return context._threadCount;
        },
        set(_threadCount) {
          context._threadCount = _threadCount;
        },
      },
      Consumer: {
        get() {
          if (!hasWarnedAboutUsingNestedContextConsumers) {
            hasWarnedAboutUsingNestedContextConsumers = true;
            warning(
              false,
              "Rendering  is not supported and will be removed in " +
                "a future major release. Did you mean to render  instead?",
            );
          }
          return context.Consumer;
        },
      },
    });
    // $FlowFixMe: Flow complains about missing properties because it doesn"t understand defineProperty
    context.Consumer = Consumer;
  }

  else {
    //const obj={}
    //obj.consumer=obj
    //也就是Consumber對(duì)象指向React.Context對(duì)象

    //在進(jìn)行渲染時(shí)，為了保證Consumer拿到最新的值，
    //直接讓Consumer=React.Context，
    // React.Context中的_currentValue已經(jīng)被的value給賦值了
    //所以Consumer能立即拿到最新的值
    context.Consumer = context;
  }
  //不看
  if (__DEV__) {
    context._currentRenderer = null;
    context._currentRenderer2 = null;
  }

  return context;
}

解析：
不看__DEV__的話，還是挺簡(jiǎn)單的，需要注意的是context.Consumer = context，讓等于React.context，這樣能立即拿到提供的最新值

二、為什么要棄用childContext？
因?yàn)?b>childContext對(duì)下層的組件影響太大了，即使子孫組件沒有用到childContext，子孫組件仍然要進(jìn)行Update，嚴(yán)重影響了性能

（完）