React Context

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

使用：

//先定义一个context
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});
...
//在爷爷组件里包裹一个父组件设置provider，如果不设置，就会使用默认的"red"

      

...
//父组件，有多少都行
function Toolbar(props) {
    return (
        

            
        
    );
}
...

老API的写法

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

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

class ThemedButton extends React.Component {
  render () {
    return (
      
        {context => (
          

            {this.props.children}
          
        )}
      
    );
  }
}