React中Context的基本使用

React中Context状态树的执行流程

react官网中的Context

前言:

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

基本使用

• 创建Context容器对象

const MyContext = React.createContext()

• 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据

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

• 后代组件读取数据

//第一种方式:仅适用于类组件 
    static contextType = xxxContext  // 声明接收context
    this.context // 读取context中的value数据
    
//第二种方式: 函数组件与类组件都可以
    <xxxContext.Consumer>   // Consumer 是消费的意思
    {
        value => (   // value就是context中的value数据
        要显示的内容
        )
    }
    </xxxContext.Consumer> 

注意：

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

---

什么是Context？

context（上下文）可以看成是扩大版的props，它可以将全局的数据通过provider接口传递value给局部的组件，让包围在provider中的局部组件可以获取到全局数据的读写接口

全局变量可以看成是全局的上下文

而上下文则是局部的全局变量，因为只有包围在provider中的局部组件才可以获取到这些全局变量的读写接口

总结：

• 使用createContext创建一个上下文。
• 设置provider并通过value接口传递state数据。
• 局部组件从value接口中传递的数据对象中获取读写接口。