context

demo

import React, { Component, createContext } from "react";
import "./App.css";

const CountContext = createContext();

class Leafe extends Component {
  render() {
    return <CountContext.Consumer>{count => <h2>count:{count}</h2>}</CountContext.Consumer>;
  }
}

Leafe.contextType = CountContext;

class Middle extends Component {
  render() {
    return <Leafe />;
  }
}

class App extends Component {
  state = {
    count: 100,
  };

  onClick = () => {
    let { count } = this.state;
    this.setState({ count: --count });
  };
  render() {
    const { count } = this.state;
    return (
      <div className="App">
        <CountContext.Provider value={count}>
          <Middle />
          <button onClick={this.onClick}>click me</button>
        </CountContext.Provider>
      </div>
    );
  }
}

export default App;

通过Provider的 value 提供值，在需要使用context值的地方使用Consumer获取，Consumer接收一个函数，函数的第一个参数就是context的值。

如果有多个 Context，可以声明多个，然后嵌套使用即可，如果每个 context 有自己的名字，那和嵌套顺序无关，如果都使用 provider、consumer 命名，则 consumer 会找最近的 provider。

contextType

每次调用都写 Consumer 很麻烦，可以使用 contextType 解决。
contextType 声明成组件的静态属性，则可以直接使用 context 的值

class Leafe extends Component {
  //static contextType = CountContext;

  render() {
    // 通过this.context直接获取context的值。
    const count = this.context;
    return <h2>count:{count}</h2>;
  }
}

Leafe.contextType = CountContext;

上面展示了两种声明方式。