什么是context
Context 提供了一個無需為每層組件手動添加 props，就能在組件樹間進行數據傳遞的方法。
在 React 中，數據是通過 props 屬性自上而下進行傳遞的。但是當某些屬性是許多組件都需要的（例如：地區偏好，UI 主題），這樣就需要通過組件樹的逐層傳遞 props，極其繁瑣。Context 提供了一種在組件之間共享此類值的方式，使得不必再顯式地逐層傳遞props。
何時使用 Context
當需要共享那些對于一個組件樹而言是“全局”的數據，例如當前認證的用戶、主題或首選語言。
何時避免使用Context
Context 主要應用于很多不同層級的組件需要訪問一些同樣的數據。因為這會使得組件的復用性變差，所以要謹慎使用。
如果你只是想避免層層傳遞一些屬性，組件組合有時候是一個比 context 更好的解決方案。
React.createContext
const MyContext = React.createContext(defaultValue);
創建一個 Context 對象。當 React 渲染一個訂閱了這個 Context 對象的組件，這個組件會從組件樹中離自身最近的那個匹配的 Provider 中讀取到當前的 context 值。只有當組件所處的樹中沒有匹配到 Provider 時，其 defaultValue 參數才會生效。
Context.Provider
<MyContext.Provider value={/* 某個值 */}>
每個 Context 對象都會返回一個 Provider React 組件，它允許consumer組件訂閱 context 的變化。
- 一個 Provider 可以和多個消費組件有對應關系。多個 Provider 也可以嵌套使用，里層的會覆蓋外層的數據。
- 當 Provider 的 value 值發生變化時，它內部的所有消費組件都會重新渲染。Provider 及其內部 consumer 組件都不受制于 shouldComponentUpdate 函數，因此當 consumer 組件在其祖先組件退出更新的情況下也能更新。
Class.contextType
掛載在 class 上的 contextType 屬性會被重賦值為一個由 React.createContext()創建的 Context 對象。這能讓你使用 this.context 來消費最近 Context 上的那個值。你可以在任何生命周期中訪問到它，包括 render 函數中。
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
/* 在組件掛載完成后，使用 MyContext 組件的值來執行一些有副作用的操作 */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* 基于 MyContext 組件的值進行渲染 */
}
}
MyClass.contextType = MyContext;
或者使用 public class fields 語法，用 static 屬性來初始化 contextType。
class MyClass extends React.Component {
static contextType = MyContext;
render() {
let value = this.context;
/* 基于這個值進行渲染工作 */
}
}
Context.Consumer
<MyContext.Consumer>
{value => /* 基于 context 值進行渲染*/}
</MyContext.Consumer>
需要將函數作為子元素，這個函數接收當前的 context 值，返回一個 React 節點。傳遞給函數的 value 值等同于往上組件樹離這個 context 最近的 Provider 提供的 value 值。如果沒有對應的 Provider，value 參數等同于傳遞給 createContext() 的 defaultValue。
Context.displayName
context 對象接受一個名為 displayName 的屬性，類型為字符串。React 開發者工具使用該字符串來確定 context 要顯示的內容。
const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';
<MyContext.Provider> // "MyDisplayName.Provider" 在 開發工具 中
<MyContext.Consumer> // "MyDisplayName.Consumer" 在 開發工具 中
動態 Context
Provider的value值，使用父組件中的state，state變化，context的value也隨之變化。
在嵌套組件中更新 Context
從一個在組件樹中嵌套很深的組件中更新 context 是很有必要的。在這種場景下，可以通過 context 傳遞一個函數，使得 consumers 組件可以更新 context。
// 確保傳遞給 createContext 的默認值數據結構是調用的組件（consumers）所能匹配的！
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
});
消費多個 Context
為了確保 context 快速進行重渲染，React 需要使每一個 consumers 組件的 context 在組件樹中成為一個單獨的節點。
// Theme context，默認的 theme 是 “light” 值
const ThemeContext = React.createContext('light');
// 用戶登錄 context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;
// 提供初始 context 值的 App 組件
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Layout() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}
// 一個組件可能會消費多個 context
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}
注意事項
如果context的value為一個對象，當每一次 Provider 重渲染時，會重渲染所有下面的 consumers 組件。原因是 value 屬性總是被賦值為新的對象。
// 觸發意外的渲染
class App extends React.Component {
render() {
return (
<MyContext.Provider value={{something: 'something'}}>
<Toolbar />
</MyContext.Provider>
);
}
}
將 value 狀態提升到父節點的 state 中，防止這種情況的出現
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: {something: 'something'},
};
}
render() {
return (
<Provider value={this.state.value}>
<Toolbar />
</Provider>
);
}
}
