注意：
以下内容大部分内容根据官方文档进行的，由于技术在不断更新，一切以官方文档为准。
说明：
Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
何时使用：
共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。
API:
- React.createContext（容器）
createContext（默认值），创建一个context。
context内包含了 Provider、Consumer。
使用的时候需要把它们两个解构出来。
import React, { createContext } from 'react'
const { Provider, Consumer } = createContext('默认名称')
- Provider(生产者)
- Consumer(消费者)
示例：
父组件：Father.js
import React, { Component , createContext} from 'react'
//下面这行抛出是为了Father下的子组件可以从这里引入
export const {Provider,Consumer} = createContext("默认名称");
//以上两行写法，是我个人比较习惯的，接下来注释的两行是另一种写法。
//import React from 'react';
//export const {Provider,Consumer} = React.createContext("默认名称");
import Son from './son'
export default class Father extends Component {
render() {
return (
<>
<Provider value='我是要传递的值！'>
<h2>父组件</h2>
<Son />
</Provider>
</>
)
}
}
子组件：Son.js
import React, { Component } from 'react'
//引入父组件的Consumer容器
import { Consumer } from './father'
import Grandson from './grandson'
export default class Son extends Component {
render() {
return (
<div>
<Consumer>
{
// 回调函数，第一个参数（自定义）可以取到父组件注入的值。
(name) =>
<>
<hr />
<h2>子组件</h2>
<p> 获取父组件的值:{name}</p>
<Grandson />
</>
}
</Consumer>
</div>
)
}
}
孙组件：grandson.js
import React, { Component } from 'react'
import { Consumer } from './father'
export default class Grandson extends Component {
render() {
return (
<div>
<Consumer>
{
(name) => {
//较于子组件的回调，我这里用了另一种，也可以实现。
return (
<>
<hr />
<h3>孙组件</h3>
<p>获取爷组件的值:{name}</p>
</>
)
}
}
</Consumer>
</div>
)
}
}
（九月萩）
在学习过程中，不仅多谢官方文档的帮助，还有以下的帮助，谢谢各位的分享。
