context学习笔记

context是一种组件间通信方式，常用于组组件与后代组件间通信（比如在一个嵌套组件里，第一层要给孙组件传值，或者要给第4层组件传值）

一、创建Context容器对象

const XxxContext = React.createContext()

二、渲染子组件时，外面包裹XxxContext.Provider，通过value属性给后代组件传递数据：

<XxxContext.Provider value={数据}>
　　子组件
</XxxContext.Provider>

三、后代组件读取数据：

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

//第二种方式：函数组价与类组件都可以
<<XxxContext.Consumer>
        {
            value => {    //value就是context中的value值
                    要显示的内容　　//可以返回一个标签，也可以返回模板字符串等，只要是能放在上一层标签内的内容都可以。
                }
        }
</XxxContext.Consumer>>

注意

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