含义及用处:

上下文:用于跨层级传递值

基本写法:

创建上下文:const demo = React.createContext()
获取 & 提供 (管道) 上下文:demo.Provider; // 注意这里没有()

Context API

  1. Ctx=React.createContext()
  2. Ctx.Provider
  3. Class.contextType
    一般在Component 里声明为 static contextType=Ctx
  4. Ctx.Consumer

Context 的使用:

  1. 一个组件只能订阅一个context,并且是类组件,类组件使用contextType
  2. 函数组件不可使用contextType,需要使用到consumer在这里插入图片描述
  3. Consumer可以用于类组件 func组件
    Consumer可以挂在 多个 context,但是contextType不行

多Context使用:

Page页:
在这里插入图片描述

Context:Context的需要一一对应,取别名
在这里插入图片描述

FuncComponent 页的使用:
在这里插入图片描述


Demo地址:https://github.com/CiciIvory/Context

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐