React 16.3来了：带着全新的Context API

文章概览

React在版本16.3-alpha里引入了新的Context API，社区一片期待之声。咱们先经过简单的例子，看下新的Context API长啥样，而后再简单探讨下新的API的意义。

文中的完整代码示例可在笔者的GitHub上找到，点击传送门。

看下新的Context API

须要安装16.3-alpha版本的react。构建步骤非本文重点，可参考笔者GitHub上的demo。

npm install react@next react-dom@next
复制代码

下面，直接来看代码，若是用过react-redux应该会以为很眼熟。

首先，建立context实例：

import React from 'react';
import ReactDOM from 'react-dom';

// 建立context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});
复制代码

而后，定义App组件，注意这里用到了Provider组件，相似react-redux的Provider组件。

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}> <Header /> </ThemeContext.Provider> ); } } 复制代码

接下来，定义Header、Title组件。注意：

1. Title组件用到了Consumer组件，表示要消费Provider传递的数据。
2. Title组件是App的孙组件，但跳过了Header消费数据。

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer> {context => ( <h1 style={{background: context.background, color: context.color}}> {this.props.children} </h1> )} </ThemeContext.Consumer> ); } } 复制代码

最后，常规操做

ReactDOM.render(
  <App />, document.getElementById('container') ); 复制代码

看下程序运行结果：

为何有新的Context API

用过redux + react-redux的同窗，应该会以为新的Context API很眼熟。而有看过react-redux源码的同窗就知道，react-redux自己就是基于旧版本的Context API实现的。

既然已经有了现成的解决方案，为何还会有新的Context API呢？

1. 现有Context API的实现存在必定问题：好比当父组件的shouldComponentUpdate性能优化，可能会致使消费了context数据的子组件不更新。
2. 下降复杂度：相似redux全家桶这样的解决方案，给项目引入了必定的复杂度，尤为是对方案了解不足的同窗，遇到问题可能束手无策。新Context API的引入，必定程度上能够减小很多项目对redux全家桶的依赖。

更多内容，欢迎你们关注个人公众号，后续进行更新

写在后面

新的Context API，我的对于性能上的提高更加期待些。至于下降复杂度、取代redux之类的，不是我关注的重点。下一步的计划就是多构造点用例来进行对比测试。

相关连接

本文完整代码示例

React新的Context API的RFC