一、简介
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
上面是react官网上关于context的介绍，简单来说，context可以理解为跨层级通信的一种方式。它解决的问题是：当层级变多时，不用通过props去层层传递。
官网中有一句提醒⏰：谨慎应用Context，因为它使组件重用更加困难。（因为它会增加代码的耦合性，第三部分的代码示例中可以直观的看到。）
二、使用
context的API有如下几种：
1. React.createContext
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件时，这个组件会从组件树中离自身最近匹配的 Provider 中读取到当前的 context 值。
const MyContext = React.createContext(defaultValue);
2. Context.Provider
每个 Context 对象都带有一个 Provider组件，它接收一个 value 属性，传递给消费组件，允许消费组件订阅 context 的变化。
一个 Provider 可以和多个消费组件有对应关系。
多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
注：Provider 的 value 值发生变化时，内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此即使祖先组件跳过更新，消费者也会更新。
<MyContext.Provider value={/* some value */}>
3. Class.contextType
挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象，可让你使用 this.context 来消费最近 Context 上的那个值。可在任何生命周期中访问到它，包括 render 函数中。
注：只能使用此 API 订阅单个上下文。
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
/* perform a side-effect at mount using the value of MyContext */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* render something based on the value of MyContext */
}
}
MyClass.contextType = MyContext;
4. Context.Consumer
React 组件也可以订阅到 context 变更。
使用中函数接收当前的 context 值（最近的 Provider 提供的 value 值），返回一个 React 节点。 value 参数等同于传递给createContext() 的 defaultValue 。
<MyContext.Consumer>
{value => /* render something based on the context value */}
</MyContext.Consumer>
5.useContext
接收一个 context 对象( React.createContext 的返回值)并返回该 context 的当前值。
注：只能用 在function组件中。
const context = useContext(MyContext)
三、使用
举一个例子🌰
页面有个按钮，点击按钮，切换整个页面的主题色；为了演示嵌套的provider，再加一个用户名，主要实现如下：
// main.js
// 这里有个开关, 打开关闭影响主页的颜色
import React, { Component } from "react";
import Head from './head';
import Content from './content';
import { ThemeProvider, UserProvider } from '../Context'
import './index.css';
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
theme: {
themeColor: 'black'
},
user: {
name: 'carol'
}
}
}
// 点击切换主题色
changeTheme = (type) => {
this.setState({
theme: {
themeColor: type ? 'black' : 'light'
}
})
}
render() {
return (
<div className='main'>
{/* provider可嵌套使用 */}
<ThemeProvider value={this.state.theme}>
<UserProvider value={this.state.user}>
<Head changeTheme={this.changeTheme} />
</UserProvider>
<Content />
</ThemeProvider>
</div>
)
}
}
// head.js
import React, { useContext, useState } from "react";
import { ThemeContext, UserContext } from '../Context';
import './index.css';
import { Button } from 'antd';
export default function Head(props) {
const { changeTheme } = props;
const themeContext = useContext(ThemeContext);
const userContext = useContext(UserContext);
const [status, setStatus] = useState(true);
const changeStatus = () => {
const tempStatus = !status;
setStatus(tempStatus);
changeTheme(tempStatus);
}
return (
<div className={themeContext.themeColor}>
<div className="header">
<div>Context Test</div>
<div className="ops">
<Button onClick={changeStatus}>{status ? 'light' : 'black'}</Button>
<div className="name">useContext: {userContext.name}</div>
</div>
</div>
</div>
)
}
// content.js
import React, { Component } from "react";
import { ThemeConsumer, ThemeContext } from "../Context";
export default class Content extends Component {
render() {
return (
<ThemeConsumer>
{
theme => (
<div className={theme.themeColor === 'light' ? 'light_content' : 'black_content'}>
<div>Context.Consumer: {theme.themeColor}</div>
<div>Class.contextType: {this.context.themeColor}</div>
</div>
)
}
</ThemeConsumer>
)
}
}
Content.contextType = ThemeContext;
结果如下：
