概念
一种组件间通信方式，常用于【祖组件】与【后代组件】间通信
应用开发过程中，一般不会使用context，一般都用它封装react插件
//1 创建Context容器对象：
cosnt XxxContext = React.createContext();
// 2 渲染子组件时，外面包裹XxxContext.provider，通过value属性给后代组件传递数据：
<xxxComponent.Provider value={数据}>子组件
</xxxComponent.Provider>
// 3 后代组件读取数据
// 写法一
// 特点：简便、主要用在类组件
static contextType = xxxContext //声明接收context
this.context //读取context中的value数据
// 写法二
// 特点：不需要this、可以接收多个context、主要用在函数组件
<xxxContext.Consumer>{value=>( //value就是context中的value数据要显示的内容)}
</xxxContext.Consumer>
实际应用
import React, { Component } from 'react';// 创建Context对象
const MyContext = React.createContext()
const { Provider, Consumer } = MyContext;class A extends Component {state = {name: 'tom',age:15}render() {const {name,age}= this.statereturn (<div><h2>组件A</h2><Provider value={{name,age}}><B/></Provider><hr /></div>);}
}class B extends Component {render() {// console.log(this)return (<div><hr /><h2>组件B</h2><C/></div>);}
}// class C extends Component {
// // 声明接收
// static contextType = MyContext
// render() {
// const { name, age } = this.context;
// return (
// <div>
// <hr />
// <h2>组件C</h2>
// <p>{name}-------{age}</p>// </div>
// );
// }
// }function C (){return (<div><hr /><h2>组件C</h2><p><Consumer>{(value)=>(`${value.name}--------${value.age}`)}</Consumer></p></div>)}export default A;
