前端框架react----Context

前端框架react----Context

---

目录

前端框架react----Context

前言

一、如何使用Context

二、API

1、React.createContext

2、Context.Provider

3、Class.contextType

4、Context.Consumer

5、Context.displayName

---

前言

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

典型的React应用，数据都是通过props属性有父传子进行传递，但是有些时候太麻烦，也有许多时候这些属性别的组件也需要，于是Context提供了一种在组件之间共享此类值得方式，不必通过组件树的逐层传递props。

一、如何使用Context

Context 为了共享对于一个组件树来说是“全局”的数据，例如当前认证的用户、主题或首选语言。

举个例子，在下面的代码中，我们通过一个 “theme” 属性手动调整一个按钮组件的样式：

使用context，我们可以避免通过中间元素传递props：

二、API

1、React.createContext

创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据

const MyContext = React.createContext(defaultValue);

注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。

2、Context.Provider

<MyContext.Provider value={/* 某个值 */}>

Provider(生产者): 和他的名字一样。用于生产共享数据的地方。生产什么呢？ 那就看value定义的是什么了。value:放置共享的数据。 

当Provider的value值发生改变，它内部所有的消费组件都会重新渲染，通过新旧值检测来确定变化，使用了与Object.is 相同的算法。

3、Class.contextType

 挂载在class上的contextType属性会被重新赋值为一个对象，这个属性可以让你用this.context来消费最近Context上的值，你可以在任意生命周期访问他，包括render函数中。

4、Context.Consumer

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

Consumer(消费者):这个可以理解为消费者。 他是专门消费数据的，也就是生产者provider生产出来的数据，Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用，那就只能消费到上文提到的defaultValue

5、Context.displayName

context 对象接受一个名为 displayName 的 property，类型为字符串。

示例，下述组件在 DevTools 中将显示为 MyDisplayName：

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" 在 DevTools 中
<MyContext.Consumer> // "MyDisplayName.Consumer" 在 DevTools 中