react读源码系列之初步了解Context

[wangzhenggui]

前言

在React中，我们一直推崇父组件与子组件之间的通信方式为通过props的方式来进行传递，但是随着我们组件之间的嵌套的层级越来越多，形成的祖孙之间的组件关系，这个时候通过props一级一级传递就会显得不是那么的明智了，这个时候我们这篇文章的主题就彰显了它的魅力，Context 专门解决这种多层级嵌套时的数据传递问题

实现方式

在react16.3版本以前呢，我们使用childContextType这个API来生成Context对象，但是在React17的版本中可能会废弃这个API，这一节我们重点说一下16.3版本推荐的一个API，React.createContext

1、首先我们先通过这个API生成context对象

import React from 'react';
const context1 = React.createContext() 
const context2 = React.createContext()
// 我们这里定义俩个context对象，这里将context对象单独写在一个文件中，是为了父组件和子组件能够更好的获得同一个生成对象
export {
  context1,
  context2
}

2、我们在最外层组件中使用Provide组件来包裹，这样子组件下都可以访问到value这个属性值来

 <context1.Provider value="123">
        <context2.Provider value="456">
          <Login />
        </context2.Provider>
 </context1.Provider>

3、子组件中使用Consumer组件来包裹，使得可以调用到最外层组件上定义的value属性

<context1.Consumer>{value => (
      <div>
        <p>{value}</p>
      </div>
    )}
</context1.Consumer>