react在版本16.3-alpha里引入了新的context api，社区一片期待之声。我们先通过简单的例子，看下新的context api长啥样，然后再简单探讨下新的api的意义。
需要安装16.3-alpha版本的react。构建步骤非本文重点，本文主要和大家分享React 16.3之Context API详解，希望能帮助到大家。
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 ( ); }}
登录后复制
接下来，定义Header、Title组件。注意：
Title组件用到了Consumer组件，表示要消费Provider传递的数据。
Title组件是App的孙组件，但跳过了Header消费数据。
class Header extends React.Component { render () { return ( Hello React Context API ); }}class Title extends React.Component { render () { return ( {context => ( {this.props.children}
)} ); }}
登录后复制
最后，常规操作
ReactDOM.render( , document.getElementById('container'));
登录后复制
看下程序运行结果：
为什么有新的Context API
用过redux + react-redux的同学，应该会觉得新的Context API很眼熟。而有看过react-redux源码的同学就知道，react-redux本身就是基于旧版本的Context API实现的。
既然已经有了现成的解决方案，为什么还会有新的Context API呢？
现有Context API的实现存在一定问题：比如当父组件的shouldComponentUpdate性能优化，可能会导致消费了context数据的子组件不更新。
降低复杂度：类似redux全家桶这样的解决方案，给项目引入了一定的复杂度，尤其是对方案了解不足的同学，遇到问题可能一筹莫展。新Context API的引入，一定程度上可以不少项目对redux全家桶的依赖。
写在后面
新的Context API，个人对于性能上的提升更加期待些。至于降低复杂度、取代redux之类的，不是我关注的重点。下一步的计划就是多构造点用例来进行对比测试。
以上就是React 16.3之Context API详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2786889.html
