react之Context

react之Context

1、理解

一种组件间通信方式，常用于【组组件】与【后代组件】间通信

2、使用

//创建Context容器对象：
const XxxContent = React.createContext()

//渲染子组件时，外面包裹XxxContent.Provider，通过value属性给后代组件传递数据
<xxxContent.Provider value={数据}>
 子组件
</xxxContent.Provider>

//后代组件读取数据
//第一种方式：仅适用于类组件
static contextType = XxxContent //声明接收context
this.context //读取context中的Value数据

//第二种方式：函数组件与类组件都可以
<xxxContent.Consumer>
{
  value = > (//value就是context中的vlaue数据
   要显示的内容
  )
}
</xxxContent.Consumer>

注意：在应用开发中一般不用context，一般都是它的封装react插件