基本理念

用原生JS来观察

{
  let context = {};
  window.setContext = function(key, value) {
    context[key] = value;
  };
  window.f1 = function f1() {
    console.log(1);
    f2();
  };

  function f2() {
    console.log(2);
    f3();
  }

  function f3() {
    console.log(3);
    f4();
  }

  function f4() {
    console.log(4, context["n"]);
  }
}

将代码构建一个独立的作用域（其实就是闭包）
将外部的变量传递给独立作用域的变量（能访问到是因为暴露一个接口出来）

{
  window.setContext("n", 100);
  setTimeout(() => {
    window.f1();
  }, 1000);

  console.log("done");
}

React Context

API

const themeContext = React.createContext();

class App extends React.Component {
  change = () => {
    if (this.state.theme === "green") {
      this.setState({ theme: "red" });
    } else {
      this.setState({ theme: "green" });
    }
  };
  constructor() {
    super();
    this.state = {
      theme: "green"
    };
  }
  render() {
    return (
      <themeContext.Provider value={this.state.theme}>
        <div className="App">
          <button onClick={this.change}>换肤</button>
          <themeContext.Consumer>
            {theme => (
              <div>
                <Box theme={theme}>
                  <Button />
                </Box>
                <Box theme={theme}>
                  <Input />
                </Box>
              </div>
            )}
          </themeContext.Consumer>
        </div>
      </themeContext.Provider>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);```