前言

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

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

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

1、案例要求

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

2、案例剖析

首先，咱们要在所有组件以外预设好两个主题的参数。依据对效果图的察看，两个不同的主题次要对应的是背景色彩、文本色彩、按钮色彩三个组成部分。布局具体的主题参数如下所示。

在上述表中，为按钮色彩布局的是 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();

为了能将用户所选的主题传递给子组件，来让子组件扭转款式，咱们须要在父组件中创立一个 state 数据，命名为 themeData。该数据的默认值为‘light’，示意默认为浅色主题。当用户单击深色主题超级链接时，扭转 themeData 数据的值为‘dark’。同时将这个 themeData 作为数据传递给子组件。

<App /> 组件的代码如下所示。

class App extends Component {constructor(props){super(props);
    this.state={themeData:'light'}
  }
  changeTheme(data){
    this.setState({themeData:data})
  }
  render(){
    return (<Provider value={this.state.themeData}>
        <div className="theme">
          <a href="#" onClick={()=>this.changeTheme('dark')}> 深色主体 </a>
          <a href="#" onClick={()=>this.changeTheme('light')}> 浅色主题 </a>
        </div>
        <Content></Content>
      </Provider>
    )
  }
}

5、<Content /> 组件的实现

该组件作为 <App /> 组件的生产组件，要是用 <Consumer> 组件接管 <App /> 组件传来的数据。即接管的数据为一个字符串：‘light’或‘dark’。而后再从示意主题的 themes 对象中，寻找对应字符串成员的各种款式取值。

<Content /> 组件的代码如下所示。

class Content extends Component {render(){
    return (
      <Consumer>
        {
          data=>{
            return (<div className="content" style={{backgroundColor:themes[data].backgroundColor,color:themes[data].color}}>
                欢送应用 Context 技术 <button className={themes[data].className}> 确定 </button>
              </div>
            )
          }
        }      
      </Consumer>
    )
  }
}

二、ContextType 技术

ContextType 技术是 React 设定的 Context 技术的简写模式，应用 ContextType 技术能够省略书写 <Consumer> 标记对。
ContextType 的书写格局有如下规定：

• 必须为创立的 Context 对象设置一个对象名，且无需解构出 Consumer。
• 在生产组件的 render() 函数内部，要定义一个动态变量，并赋值为创立的 Context 对象名。
• 在生产组件的 render() 函数外部，return 语句之前，应用 this.context 来接管生产组件传递过去的参数。

把上述案例整体改写为 ContextType 技术，其书写格局如下所示。

const themeContext=React.createContext();
const {Provider} = themeContext;
class Content extends Component{
  static contextType = themeContext;
  render(){
    const para=this.context;    //para 就是接管到的生产组件传来的数据
    return (<div className="content" style={{backgroundColor:themes[para].backgroundColor,color:themes[para].color}}>
        欢送应用 Context 技术 <button className={themes[para].className}> 确定 </button>
      </div>
    )
  }
}

三、Context 的默认值

在利用 React.createContext() 办法创立 Context 对象时，该办法是具备参数的，该参数是 Context 的默认值。格局如下所示。

const {Provider,Consumer} = React.createContext(defaultValue);

若想让该默认值失效，则生产组件无需应用进行包裹，这样生产组件只能承受到 defaultValue 传递过去的数据。即没有被 <Provider> 包裹的组件只能获取 Context 的 defaultValue，也只能向生产组件传递 defaultValue 的值。

总结

本文是 React 系列教程的第十篇文章，在上一讲的根底之上持续解说了 React Context 的用法。本篇文章次要包含 React Context 在批改页面主题性能上的利用，以及 ContextType 技术的简化写法，并为大家解说了带有默认值的 Context 是如何应用的。

第一讲 初识 React 框架

第二讲 意识 JSX 语法格局

第三讲 React 组件

第四讲 React 父子组件之间的通信

第五讲 React 兄弟组件之间的通信

第六讲 React 受控组件的应用

第七讲 React 非受控组件的应用

第八讲 React 组件的生命周期

第九讲 React Context 技术（1）

对于作者

小海前端，具备 18 年 Web 我的项目开发和前后台培训教训，在前端畛域著有较为零碎的培训教材，对 Vue.js、微信小程序开发、uniApp、React 等全栈开发畛域都有较为深的造诣。入住 Segmentfault，心愿可能更多地结识 Web 开发畛域的同仁，将 Web 开发鼎力地进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。