react之Context

context

**context**相关资料

1. Context : 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法
2. 使用props或者state传递数据，数据自顶下流

​ 使用Context，可以跨越组件进行数据传递。

如何使用react中的context

1

import React, { Component, createContext } from "react";

将createContext()方法从react中解构出来,createContext()返回一个对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIHaMtvJ-1587828237303)(C:\Users\zzd1995\AppData\Roaming\Typora\typora-user-images\1587561746374.png)]

let counterContext = createContext()
let {Provider,Consumer} = counterContext

Provider：提供者。也就是我们所需要共享的state，以及更改state的方法

Provider必须配合value使用

<Provider value={所需要的共享的state和方法}>{this.props.children}</Provider>

注意:Provider所包裹的根节点内如果需要插入子节点需要在封装好的Provider使用 {this.props.children}表示组件的所有子节点

Consumer:消费者。使用Provider所共享的状态以及方法

Consumer是一个函数

<Consumer>
{
(我们所需的state或者方法)=>{
return ({
	需要生成的节点
})
}
}

</Consumer>

以上是Consumer在class组件中的使用
如果是无状态组件需要传入props

function CounterBtn(props){}

除了使用Consumer可以使用Provider所提供的的state和方法之外还可以通过{this.context.所需state和方法}

使用{this.context}之前需要写入
static contextType = counterContext;
  render() {
    //console.log(this.context)
    //console.log(this)
    return (
      <div>
        <p>数量:{this.context.counter}</p>
      </div>
    );
  }