之前使用正常的props方式，进行数据单向传递：
class Context extends React.Component{
render () {
return <Toolbar theme="dark" />
}
}
function Toolbar (props) {
return(
<div>
<ThemedButton theme={props.theme} />
</div>
)
}
class ThemedButton extends React.Component{
render () {
console.log(this.props.theme);//dark
return <button theme={this.props.theme}>点击啊</button>
}
} Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事， 因为必须将这个值层层传递所有组件。SKx易塔云建站-模板下载,web开发资源,技术博客
下面我们使用Context方法：
//Context 可以让我们无须明确的传遍每一个组件，就能将值深入传递进组件树。
//为当前的theme创建一个context('light'为默认值)
const ThemeContext = React.createContext('light');
class Context extends React.Component{
render () {
//使用一个 provider 来将当前的theme传递给一下祖建树
//无论多深，任何组件都能读到这个值。
//在此例中，我们将 “dark” 作为当前值传递下去。
return(
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
}
}
//中间的组件，再也不必指明往下传递theme了
function Toolbar () {
return(
<div>
<ThemeButton />
</div>
)
}
class ThemeButton extends React.Component{
//指定 contextType读取当前的theme context。
//React会往上查找最近的theme Provider,然后使用它的值。
//在此例中，当前的theme值为 “dark”。
static contextType = ThemeContext;
render () {
console.log(this.context)
return <button theme={this.context}>点我啊</button>
}
}
