React（10）React Context技术（2）

---

前言

承接上一篇关于React Context技术的文章。React Context技术在页面主题修改应用上提供了较好的方法，同时React还提供了ContextType技术，用于实现对Context技术进行简化书写。本篇文章对这两个概念进行讲解，最后再讲解Context默认值的使用方法。

在开始正式讲解之前， 再次强调React Context的功能：实现组件之间的数据传递。

---

一、案例：更改页面的主题

1、案例要求

页面中有两个超级链接，用于控制页面中内容的主题颜色。两个超级链接分别是“浅色主题”和“深色主题”。为了掩饰主题的更改，在页面中还设置了一个div容器，深浅色主题对应该div容器不同的背景颜色。div容器中有文本和一个命令按钮，深浅色主题也对应着文本的不同颜色和按钮的不同样式。案例的最终效果图如下所示。

2、案例分析

首先，我们要在所有组件以外预设好两个主题的参数。根据对效果图的观察，两个不同的主题主要对应的是背景颜色、文本颜色、按钮颜色三个组成部分。规划具体的主题参数如下所示。

	背景颜色	文本颜色	按钮颜色样式
浅色模式	#dddddd	#000000	.btn-primary
深色模式	#222222	#ffffff	.btn-danger

在上述表中，为按钮颜色规划的是Bootstrap框架中的两种不同的按钮背景颜色类。如果不使用Bootstrap，也可以在CSS文件中独立书写这两个类，并为这两个类设置不同的外观。

按照上述表中的外观规划，定义一个themes的对象，包含两种主题样式，代码如下所示。

const themes={
   
  light:{
   
    className:'btn btn-primary',
    backgroundColor:'#ddd',
    color:'#000'
  },
  dark:{
   
    className:'btn btn-danger',
    backgroundColor:'#222',
    color:'#fff'
  }
};

3、案例组件划分

其次，我们来为这个案例进行组件划分。很显然，我们可以将其划分为两个组件：

• 父组件<App />：实现改变主题的超级链接和整个案例的布局。
• 子组件<Content />：实现案例下方的<div>容器和其内部的文本与按钮。

4、<App />组件的实现

在书写组件<App />时，要先创建Context对象，并解构出生产组件和消费组件。

const {
   Provider,Consumer} = React.createContext