redux原理跟其類(lèi)似榨咐，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的寫(xiě)法
class ThemedButton extends React.Component {
//要使用的孫組件里定義contextType
static contextType = ThemeContext;
//然后this.context就可以直接使用了
render() {
return <Button style={{ 'background':this.context }} />;
}
}
或者在孫組件中（新API寫(xiě)法）
class ThemedButton extends React.Component {
render () {
return (
<ThemeContext.Consumer>
{context => (
<h1 style={{background: context.background, color: context.color}}>
{this.props.children}
</h1>
)}
</ThemeContext.Consumer>
);
}
}
