React 16.3来了：带着全新的Context API
2024-04-03 13:29:55
文章概览
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组件。注意：
Title组件用到了Consumer组件，表示要消费Provider传递的数据。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呢？
- 现有Context API的实现存在一定问题：比如当父组件的
shouldComponentUpdate性能优化，可能会导致消费了context数据的子组件不更新。 - 降低复杂度：类似redux全家桶这样的解决方案，给项目引入了一定的复杂度，尤其是对方案了解不足的同学，遇到问题可能一筹莫展。新Context API的引入，一定程度上可以减少不少项目对redux全家桶的依赖。
写在后面
新的Context API，个人对于性能上的提升更加期待些。至于降低复杂度、取代redux之类的，不是我关注的重点。下一步的计划就是多构造点用例来进行对比测试。
更多内容，欢迎大家关注我的公众号，后续进行更新
相关链接
最新文章
- 我的MYSQL学习心得（一） 简单语法
- FPGA中的INOUT接口和高阻态
- 城市区号SQL
- Spring 框架 详解 （四）------IOC装配Bean(注解方式)
- sql中charindex
- C#中的文件操作
- （转）根据IP返回对应的位置信息
- 201521123003《Java程序设计》第14周学习总结
- rem_750
- sed -i命令详解
- LeetCode题解之Counting Bits
- Prototype（原型）
- [转]go中的main函数和init函数
- 对比Vector、ArrayList、LinkedList区别
- 5plus
- JQuery里面的知识
- c语言代码风格
- easyui-combogrid匹配查询
- memcache 协议 && Golang实现
- iOS 开发图片资源选择png格式还是jpg格式