在一个经典的
React应用中，组件之间通信是常用到的技术方案。在父子组件之间通常通过props来传递参数，而非父子组件就比较麻烦了，要么就一级一级通过props传递，要么就使用ReduxorMobx这类状态管理的状态管理库，但是这样无疑增加了应用的复杂度。在 FEers 的期盼中，React团队终于从16.3.0版本开始新增了一个新的 APIContext，福音啊。好了，今天我就来一起学习一下这个新的Context。
什么时候使用 Contsxt
Context 目的是为了共享可以被认为是 React 组件“全局”树的数据。例如当前应用的主题、首选语言等等。接下来看看通过 props 和 Context 两种方式实现按钮组件样式参数传递方式的对比：
- props
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
ThemedButton(props) {
return <Button theme={props.theme} />;
}
- Context
// 创建 context 实例
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
ThemedButton(props) {
return (
<ThemeContext.Consumer>
{theme => <Button {...props} theme={theme} />}
</ThemeContext.Consumer>
);
}
API
React.createContext
创建一个 Context ，React.createContext 提供了 {Provider,Comsumer} 两个方法，上面的代码也可以这个来写：
const {Provider,Comsumer} = React.createContext('light');
class App extends React.Component {
render() {
return (
<Provider value="dark">
{/* ... */}
</Provider>
);
}
}
{/* ... */}
ThemedButton(props) {
return (
<Consumer>
{/* ... */}
</Consumer>
);
}
Provider
这里的 Provider 类似 react-redux 中的 Provider 组件，用来注入全局的 data （允许 Consumer 订阅 Context 的变化）。一个 Provider 可以连接到多个 Consumer。
Consumer
Consumer 组件，表示要消费 Provider 传递的数据（订阅 Context 的响应组件）。当 Provider 发生变化的时候，所有的 Consumer 都会被 re-rendered。
结束语
新 Context 的引入，一定程度上可以减少不少项目对 redux 全家桶的依赖，从而降低了项目的复杂程度，何乐而不为呢～～
原文更多文章 传送门>>
