[JavaScript知识库]react context

是什么?

?context，一种组件间通信方式，常用于祖组件和后代组件。父子组件一般不使用。?? ?

?在应用开发中一般不用context, 一般都用它的封装react插件，比如react-redux。

?下图中A和C、D?通信就是祖和后代组件。父子可以用context，但是不常用，因为父子用props更简单。

使用步骤?

?1) 创建Context容器对象

? ? ? ? 注意：需要在祖、后代组件都可以访问到的位置定义context容器。

const XxxContext = React.createContext() ?

2) 在祖组件定义子组件时，外面包裹xxxContext.Provider, 通过value属性定义值。此时子组件的后代组件就可以接收到数据

????????value可以是字符串，也可是对象。

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

注意：子组件包含后代组件，此时后代组件可以接收到context传值。

3) 后代组件读取数据

?? ?第一种方式 只有类组件能使用?
?? ? ?static contextType = xxxContext ?// 声明接收context，名字必须是contextType
?? ? ?this.context // 读取context中的value数据
?? ? ?
?? ?第二种方式 函数组件与类组件都可以使用

? ? ? ? Consumer里面是一个函数。单个接收值，如果单个返回值可以不写return和大括号。
?? ? ?<xxxContext.Consumer>
?? ? ? ?{
?? ? ? ? ?value => ( // value就是context中的value数据
?? ? ? ? ? ?要显示的内容
?? ? ? ? ?)
?? ? ? ?}
?? ? ?</xxxContext.Consumer>

### 注意

?? ?在应用开发中一般不用context, 一般都用它的封装react插件，比如react-redux。

代码实现

A B C D 四个组件，D是函数式组件，其他是类式组件。

import React, { Component, Fragment } from 'react'
import Demo from './05-context'

//1.在祖 后代组件都可以访问的位置定义context容器
const MyContext = React.createContext()

const { Provider, Consumer } = MyContext

export default class A extends Component {
  state = { name: "tom" }
  render() {
    return (
    //2.祖组件 定义子组件时 使用Provider包括
      <Provider value={"tom"}>
        <h3>我是A组件</h3>
        <p>我的用户名{this.state.name}</p>
        <B />
      </Provider>
    )
  }
}


class B extends Component {
  render() {
    return (
      <>
        <h3>我是B组件</h3>
        <p>我的用户名{"???"}</p>
        <C />
      </>
    )
  }
}


class C extends Component {
  //3. 如果后代组件是类组件 可以使用第一种方式接受context值
  static contextType = MyContext
  render() {
    return (
      <>
        <h3>我是C组件</h3>
        <p>我的用户名{this.context}</p>
        <D />
      </>
    )
  }
}

function D() {

  return (
    <>
      <h3>我是D组件</h3>
      //3. 如果后代组件是函数式组件 接受context可以使用Consumer
      <Consumer>{value => `我的用户名${value}`}
      </Consumer>
    </>
  )

}