官方對于Context的定義
React文檔官網(wǎng)并未對Context給出“是什么”的定義，更多是描述使用的Context的場景泉瞻，以及如何使用Context。
官網(wǎng)對于使用Context的場景是這樣描述的：
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
簡單說就是苞冯，當(dāng)你不想在組件樹中通過逐層傳遞props或者state的方式來傳遞數(shù)據(jù)時袖牙，可以使用Context來實(shí)現(xiàn)跨層級的組件數(shù)據(jù)傳遞。
意思就是說舅锄，當(dāng)你多個組件深層嵌套后最里層的組件想要使用最外層組件的傳過來的值的時候鞭达，通過props傳值就得一層層的往下傳，代碼很繁瑣皇忿，而使用Context畴蹭，子組件就可以很方便的使用外層的父組件的值
如何使用Context （V16.x之前）
如果要Context發(fā)揮作用，需要用到兩種組件鳍烁，一個是Context生產(chǎn)者(Provider)叨襟，通常是一個父節(jié)點(diǎn)，另外是一個Context的消費(fèi)者(Consumer)幔荒，通常是一個或者多個子節(jié)點(diǎn)糊闽。所以Context的使用基于生產(chǎn)者消費(fèi)者模式。
對于父組件爹梁，也就是Context生產(chǎn)者右犹，需要通過一個靜態(tài)屬性childContextTypes聲明提供給子組件的Context對象的屬性，并實(shí)現(xiàn)一個實(shí)例getChildContext方法姚垃，返回一個代表Context的純對象 (plain object) 念链。
父組件
class Parent extends React.Component {
getChildContext() {
return {color: "purple"};
}
}
Parent.childContextTypes = {
color: PropTypes.string
};
子組件
class Child extends React.Component {
render() {
return (
<p>
直接用過，context訪問屬性
{this.context.color}
</p>
);
}
}
子組件需要通過一個靜態(tài)屬性contextTypes聲明后，
才能訪問父組件Context對象的屬性钓账，否則碴犬，即使屬性名沒寫錯，
拿到的對象也是undefined
Child.contextTypes = {
color: PropTypes.string
};
V16.x之后 (更加明確了生產(chǎn)者消費(fèi)者模式的使用方式)
通過靜態(tài)方法React.createContext()創(chuàng)建一個Context對象梆暮，這個Context對象包含兩個組件服协，<Provider />和<Consumer />
爺組件
import React from "react";
import ReactDom from "react-dom";
const GrandFatherContext = React.createContext({
color:'red'
});
class App extends React.Component {
render() {
return (
<GrandFatherContext.Provider>
<Father value={{color:'red'}}></Father>
</GrandFatherContext.Provider>
);
}
}
<Provider />的value相當(dāng)于之前的getChildContext()
父組件（嵌套子組件）
class Father extends React.Component {
render () {
return (
<Son>Hello React Context API</Son>
);
}
}
class Son extends React.Component {
render () {
return (
<GrandFatherContext.Consumer>
{context => (
<h1 style={{ color: context.color}}>
{this.props.children}
</h1>
)}
</GrandFatherContext.Consumer>
)
}
}
<Consumer />的children必須是一個函數(shù)，通過函數(shù)的參數(shù)獲取<Provider />提供的Context
總結(jié)
新版 Context API 組成：
- React.createContext 方法用于創(chuàng)建一個
Context對象啦粹。該對象包含Provider和Consumer兩個屬性偿荷，分別為兩個 React 組件。- Provider 組件唠椭。用在組件樹中更外層的位置跳纳。它接受一個名為
value的 prop，其值可以是任何 JavaScript 中的數(shù)據(jù)類型贪嫂。- Consumer 組件寺庄。可以在
Provider組件內(nèi)部的任何一層使用力崇。它接收一個名為children值為一個函數(shù)的 prop斗塘。這個函數(shù)的參數(shù)是Provider組件接收的那個valueprop 的值，返回值是一個 React 元素（一段 JSX 代碼）亮靴。
