[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属性发生变化，会导致该上下文提供的所有后代元素全部重新渲染，无论该子元素是否有优化。(强制更新)