[TOC] > [聊一聊我對 React Context 的理解以及應用 - 簡書](https://www.jianshu.com/p/eba2b76b290b) ## :-: Context **React中的上下文特點** * 當某個組件創建了上下文后，上下文中的數據，會被所有后代組件共享。 * 如果某個組件依賴了上下文，會導致該組件不再純粹。(外部數據僅來源于屬性props) * 一般情況下，用于第三方組件(通用組件) ### :-: 舊版的API - 只有類組件才可以創建上下文 **父級(創建)** ``` import PropTypes from 'prop-types'; static childCaontextTypes = {a:PropTypes.string} getChildContext(){ return {a:this.state.a} } ``` **子級(使用)** :-: --- 類組件 ``` import PropTypes from 'prop-types'; static contextTypes = {a:PropTypes.string} constructor(props,context){ super(props,context); // 將參數的上下文交給父類處理 console.log(this.context); } ``` :-: --- 函數組件 ``` Child.contextTypes = {a:PropTypes.string} function Child(props,context){ console.log(this.context.a); } ``` ### :-: 新版的API **上下文是一個獨立于組件的對象，該對象通過React.createContext(默認值)創建，返回的是一個包含兩個屬性的對象。 {Provider,Consumer}** * Provider屬性：生產者，一個組件，該組件會創建一個上下文。該組件有一個value屬性，通過該屬性，可以為其數據賦值。 * Consumer屬性：消費者 **在類組件中，直接使用this.context獲取上下文數據。** * 必須有靜態屬性contextType，應賦值為創建的上下文對象。 **在函數組件中，需要使用Consumer來獲取上下文數據。** * Consumer是一個組件 * 它的子節點，是一個函數(它的props.children需要傳遞一個函數) ``` const __ctx = React.createContext({a:123,b:'abc'}); // 創建上下文對象，參數為默認值 ``` **父級(創建)** ``` render(){ const {Provider} = __ctx; return ( <Provider value={{b:'可以改變元數據'}}> ··· </Provider> ) } ``` **子級(使用)** :-: 類組件 ``` static contextType = __ctx; render(){ return <p>{this.context.b}</p> } ``` :-: 函數組件 ``` const {Consumer} = __ctx; function Child(props){ return <> <Consumer> { value => { return <span>{value.b}</span> } } </Consumer> </> } ``` **注意細節：** 上下文提供者(Context.Provider)中的value屬性發生變化，會導致該上下文提供的所有后代元素全部重新渲染，無論該子元素是否有優化。(強制更新)