redux原理跟其類似，redux的provider就是用context實(shí)現(xiàn)的

使用：

//先定義一個(gè)context
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});
...
//在爺爺組件里包裹一個(gè)父組件設(shè)置provider，如果不設(shè)置，就會(huì)使用默認(rèn)的"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>
    );
  }
}