组件跨层级通信 - Context

如何使用Context：
step1 : 创建一个context对象
step2: 创建Provider，传递value
step3: 子组件消费value , 有三种途径： contextType、useContext、Consumer

区别
contextType 只能用在类组件，只能订阅单一的context来源
useContext只能用在函数组件或者自定义hook中
Consumer 不限制函数或者类组件

1. 创建一个context对象

export const Context = React.createContext()

2. 创建Provider，传递value

constructor(props) {
  super(props);
  this.state = {
    theme: {themeColor: "red"}
  };

  render() {
    const {theme} = this.state;
    return (
      <div>
        <h3>ContextPage</h3>
        <Context.Provider value={theme}>
            <ContextTypePage />
            <UseContextPage />
            <ConsumerPage />
        </Context.Provider>
      </div>
    );
  };
}

3.1. contextType使用

export default class ContextTypePage extends Component {
  static contextType = Context;

  render() {
    const {themeColor} = this.context;
    console.log("contextType", this.context); 

    return (
      <div>
        <h3 className={themeColor}>ContextTypePage</h3>
      </div>
    );
  }
}

3.2 useContext

import React from "react";
import {Context} from "../Context";

export default function UseContextPage(props) {
  const theme = React.useContext(Context);

  return (
    <div>
      <h3 className={theme.themeColor}>UseContextPage</h3>
    </div>
  );
}

3.3 Consumer

import React, {Component} from "react";
import {Context} from "../Context";

export default class ConsumerPage extends Component {
  render() {
    return (
      <div>
        <h3>ConsumerPage</h3>
        <Context.Consumer>
          {theme => {
            return (
              <div className={theme.themeColor}>
                omg
              </div>
            );
          }}
        </Context.Consumer>
      </div>
    );
  }
}