index.jsx:

import React from 'react'
import { Provider } from "./context";
import C from "./C";
// const MyContext = React.createContext();
// const { Provider, Consumer } = MyContext;

export default function A() {
    const [count, setCount] = React.useState(0);
    function add() {
        setCount(count => count + 1)
    }
    return (
        <div>
            <div>这是A组件</div>
            <button onClick={add}>加一</button>
            <Provider value={{ count, setCount }}>
                <B />
            </Provider>
        </div>
    )
}

function B() {
    return (
        <div>
            这是B组件
            <C />
        </div>
    )
}

C.jsx:

import { Consumer } from "./context";
export default function C() {
    return (
        <div>
            这是C组件
            <Consumer>
                {
                    value => {
                        debugger
                        return value.count
                    }
                }
            </Consumer>
        </div>
    )
}

context.jsx:

import { createContext } from "react";
const myContext = createContext()
export const { Provider, Consumer } = myContext

当我们在处理祖孙组件或者更深层次的组件时，可以使用React身上的 createContext() 这个方法
执行createContext，可以接收一个实例，并且实例身上有两个API: Provider、Consumer

我们在父组件的中子组件外包裹<Provider></Provider>标签，并向标签传入value属性
在孙组件或者更深层次的组件中使用<Consumer></Consumer>标签来接收传入的值

        <Provider value={{ count, setCount }}>
            <B />
        </Provider>

        <Consumer>
            {
                value =>  value.count   // 传入了count，这里就用value.count接，value代表传入的对象集合
            }
        </Consumer>