注意：
以下內(nèi)容大部分內(nèi)容根據(jù)官方文檔進行的倾芝，由于技術(shù)在不斷更新论衍，一切以官方文檔為準堰燎。
說明：
Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props淆储。
何時使用：
共享那些對于一個組件樹而言是“全局”的數(shù)據(jù)冠场，例如當前認證的用戶、主題或首選語言本砰。
API:
- React.createContext（容器）
createContext（默認值）碴裙，創(chuàng)建一個context。
context內(nèi)包含了 Provider点额、Consumer舔株。
使用的時候需要把它們兩個解構(gòu)出來。
import React, { createContext } from 'react'
const { Provider, Consumer } = createContext('默認名稱')
- Provider(生產(chǎn)者)
- Consumer(消費者)
示例：
父組件：Father.js
import React, { Component , createContext} from 'react'
//下面這行拋出是為了Father下的子組件可以從這里引入
export const {Provider,Consumer} = createContext("默認名稱");
//以上兩行寫法还棱，是我個人比較習(xí)慣的载慈，接下來注釋的兩行是另一種寫法。
//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>
{
// 回調(diào)函數(shù)办铡，第一個參數(shù)（自定義）可以取到父組件注入的值。
(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) => {
//較于子組件的回調(diào)珠十，我這里用了另一種料扰，也可以實現(xiàn)凭豪。
return (
<>
<hr />
<h3>孫組件</h3>
<p>獲取爺組件的值:{name}</p>
</>
)
}
}
</Consumer>
</div>
)
}
}
（九月萩）
在學(xué)習(xí)過程中焙蹭，不僅多謝官方文檔的幫助，還有以下的幫助嫂伞，謝謝各位的分享孔厉。
