文章概述React在16.3-alpha版本中引入了新的ContextAPI，社区对此充满了期待。我们先用一个简单的例子来看看新的ContextAPI长什么样，然后再简单讨论一下新API的含义。本文完整代码示例可在作者的GitHub上找到，点击传送。看到新的ContextAPI需要安装react的16.3-alpha版本。搭建步骤不是本文的重点，可以参考作者GitHub上的demo。在npminstallreact@nextreact-dom@next下，我们直接看代码。如果你用过react-redux，应该会觉得很熟悉。首先，创建一个上下文实例：importReactfrom'react';importReactDOMfrom'react-dom';//创建上下文实例constThemeContext=React.createContext({background:'red',color:'white'});然后，定义App组件，注意这里使用的是Provider组件，类似于react-redux的Provider组件。classAppextendsReact.Component{render(){return();}}接下来，定义Header和Title组件。注意：Title组件使用了Consumer组件，说明它要消费Provider传过来的数据。Title组件是App的孙子组件，但是Header消费数据被跳过了。classHeaderextendsReact.Component{render(){return(HelloReactContextAPI);}}classTitleextendsReact.Component{render(){return({context=>({this.props.儿童})});}}最后，正常的ReactDOM操作。render(,document.getElementById('container'));看程序运行结果：为什么会有新的ContextAPI？用过redux+react-redux的同学应该对新的ContextAPI很熟悉。而看过react-redux源码的同学都知道，react-redux本身就是基于老版本的ContextAPI实现的。既然已经有了现成的解决方案，为什么还要有一个新的ContextAPI呢？现有的ContextAPI的实现存在一定的问题：比如父组件的shouldComponentUpdate性能优化时，可能会导致消费context数据的子组件没有更新。降低复杂度：像redux全家桶这样的方案给项目带来了一定的复杂度，尤其是对方案不够了解的同学，遇到问题可能会手足无措。引入新的ContextAPI可以在一定程度上减少很多项目对redux全家桶的依赖。后面写的新的ContextAPI，个人比较期待更多的性能提升。至于降低复杂度，替换redux等等，不是我关注的重点。下一步是构建多个用例进行比较测试。更多内容欢迎关注我的公众号，后续更新相关链接本文完整代码示例React新的ContextAPI的RFC
