适用场景

组件有些场景下是层层嵌套的，在传props的过程中，需要一层一层传递很麻烦， createContext&useContext就是解决此问题的，可以实现隔代传递

CreateContext

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值

context对象包含Provider和Consumer,Provider用来传递值，Consumer用来接收值

useContext

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值

//context.js
import { createContext } from "react";
const TestContext = createContext();
const { Provider, Consumer } = TestContext;
export { TestContext, Provider, Consumer };

//Outer
import React, { Component } from 'react'
import {Provider} from './context'
import Inner from './inner'
import Son from './Son'

export default class Outer extends Component {
    state = {
        name:123
    }
  render() {
    return (
      <Provider value={this.state.name}>
        <Inner/>
        <Son/>
      </Provider>
    )
  }
}

//Inner
import React, { Component } from "react";
import { Consumer } from "./context";
import Deep from "./deep";

export default class inner extends Component {
  render() {
    return (
      <Consumer>
        {(data) => {
          console.log("data", data);
          return <Deep></Deep>;
        }}
      </Consumer>
    );
  }
}

//Deep
import React, { useContext } from "react";
import { TestContext } from "./context";

export default function Deep() {
  const val = useContext(TestContext);
  return <button>{val}</button>;
}