redux原理跟其类似，redux的provider就是用context实现的

使用：

//先定义一个context
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});
...
//在爷爷组件里包裹一个父组件设置provider，如果不设置，就会使用默认的"red"
<ThemeContext.Provider value={{background: 'green', color: 'white'}}>
      <Toolbar />
</ThemeContext.Provider>
...
//父组件，有多少都行
function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}
...

老API的写法

class ThemedButton extends React.Component {
//要使用的孙组件里定义contextType
  static contextType = ThemeContext;
//然后this.context就可以直接使用了
  render() {
      return <Button style={{ 'background':this.context }} />;
  }
}

或者在孙组件中（新API写法）

class ThemedButton extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}