context提供了一种数据共享的机制，里面有两个关键概念——provider,consumer，下面做一些key features描述。
参考网址：https://react.docschina.org/docs/context.html#reactcreatecontext
consumer：
数据消费者，消费来自己向上回溯过程中，离自己最近的provider提供的数据。
consumer接收一个函数作为子节点，函数返回一个react节点；函数可以消费来自context的值(即最近provider提供的数据)进行内部JSX语法渲染。
provider：
数据提供者，一个provider下的所有消费者都可以消费来自该provider的数据。
provider接收一个value属性，这个属性讲被provider提供给其consumer子节点。
一个provider可对应多个consumer。
生成一对{ provider, consumer}
基本上关于Context相关的主要特性都介绍完了，一个完整的demo如下：
theme-context.js
export const themes = {
light: {
foreground: '#ffffff',
background: '#222222',
},
dark: {
foreground: '#000000',
background: '#eeeeee',
},
};
export const ThemeContext = React.createContext(
themes.light //默认值
);
themed-button.js
import React from 'react';
import {themes,ThemeContext} from './theme-context';
class ThemeCircle extends React.Component{
render(){
return (
{ theme => (<div
style={{
width:"60px",
height:"60px",
borderRadius:"30px",
backgroundColor: theme.background}}>
{/* Circle */}
) }
);
}
}
class ThemedButton extends React.Component{
constructor( props ){
super(props);
}
render(){
return (
{ theme => (<button
onClick = {this.props.changeTheme}
{...this.props}
style={{
backgroundColor:theme.background,
color:theme.foreground,
width:"100px",
height:"45px",
fontSize:"14px",
borderRadius:"5px",
border:"none"}}
/>) }
);
}
}
// class ToolBar extends React.Component{//一个用到ThemedButton的中间件
// constructor( props ){
// super(props);
// }
// render(){//以此种方式直接触发父级事件？
// return (
// Change Theme
// );
// }
// }
class CustomizedApp extends React.Component{
constructor( props ){
super(props);
this.state =
{
theme: themes.light
};
this.handleChangeTheme =
this.handleChangeTheme.bind(
this );
}
handleChangeTheme(){
//必须有一个机制可以修改provider的value,以引起订阅者consumer的变更
this.setState( state =>
({
theme: state.theme === themes.light?
themes.dark:themes.light
}) );
}
render(){
return (
this.state.theme}>
{/* */}
this.handleChangeTheme}>
Toggle
);
}
}
export default CustomizedApp;
