【一】跟着react官网学习--------Context

           Context提供了组件之间数据共享的解决方案，相比之下，若组件嵌套过深，或者在多个组件使用，props传递则显得较为不便，我们熟悉的react-redux它的原理其实也是使用了context原理，使用provider将数据分发到包裹的组件中，实现数据的共享，下面我们就结合官网中的例子开始context的学习。

 

1.基础用法

首先举了一个两层嵌套，在三个组件中数据传递的例子，就是将属性使用props.属性从第一个组件传递到第二个，再传递到第三个组件，如下图所示：

如果使用context我们不在需要层层传递，我们直接使用一个脚手架进行实践操作，按照例子修改即可

App.js修改后代码如下：

稍微修改下得到按钮如下：

这是context的基本用法

2.API

React.createContext

可以这样理解：现在创建了MyContext对象，如果一个组件想使用到这个context的值，就可以将这个context导入到组件中，然后这个组件就会在组件树中寻找包裹这它的provider，去拿它的value，如果外面没有provider，则它会拿这个context的默认值，我修改了项目代码如下图所示，我们可以看到没了provider的包裹他去找默认值light，所以按钮颜色变成了绿色：

Context.Provider

provider的value属性提供了一个值供给组件进行改变时的页面渲染，只要记住，只要这个value变化，组件就会重新渲染

Class.contextType

可以理解为：contextType使用static类来声明，它是本组件的一个值，且相当与一个context对象（声明了的context，且有包裹本组件），在这个组件中，你可以使用this.context去拿到它的值；

Context.Consumer

这个组件也可以访问到context的值，看了下面代码，就会清晰明白它的用法，就不多介绍了：

3.例子

现在我们先按照官网的例子在项目上写出来，然后再来分析；

由代码我们可以看到，ThemeContext.Provider首先在apps中注册给了Toolbar组件，而Toolbar组件又是由ThemedButton组成的，apps组件中就有了两个按钮：

当我们点击第一个按钮的方法时，我们可以看到，toggleTheme()方法，判断context中拿到的数据，然后确定theme当前的值，是dark：

然后可以看到，在ThemedButton组件中使用拿到的context数据去渲染了button标签的背景：

此时没有被provider包裹的ThemedButton组件，上面提过，没被包裹就会使用这个context的默认值也就是dark的背景色，所以第一个按钮可以切换颜色，而第二个一直是黑色的：

官网下面还有个例子，是介绍了Context.Consumer的用法，使用它来更新页面，原理和上面的例子没什么区别，可能不同的就是获取数据的方式，Consumer是使用组件包裹拿到context数据，且返回的是函数，函数中的入参为需要的值，可参考第二部分的内容理解，这里不再过多赘述了；

4.消费多个 Context

如果一个组件包裹了多个context的provider，我理解的这个组件中则这两个值都可以直接调用，其实我们实际开发过程中，只要关注全局的组件，将所有的context注册给这个组件即可，比如脚手架中，你可以把所有你创建的context注册给App文件，则在这个组件中，那么项目的每一个地方，我们都可以访问到这些值，这样就实现了全局数据分享的功能。

关于全局数据的使用，之前经常用react-redux，但这个react插件比较繁杂一些，理解起来也比较抽象，其实它也是使用了context的原理来封装，如果想熟练掌握context，还需要将它用在自己项目中多多实践。

希望对你有所帮助