文章翻译自Seth Corker的A look at the React Context API,并且不是百分之百原文翻译,一些译者认为并不重要的部分被省略了,同时也加入一些原文内未出现的解释性文字。如果想要阅读原文,请转至https://medium.com/front-end-…
React 16带来了许多非常棒的新功能(虽然异步渲染还是不见踪影),新的Context API便是其中之一。
什么是Context API
Context API包含两个组件,<Provider>
和<Consumer>
。若后者(Consumer)存在于前者(Provider)的子组件(children)中,那么无论后者处于前者子组件的哪个位置,前者可以向后者直接提供数据。
应该如何使用Context API
我(作者)制作了一个购物车样例来展示Context API是如何工作的,源码在https://github.com/Darth-Knop…。
上图显示了商品是如何加入购物车或从购物车中移除的。每一个商品都有一个Consumer用于显示购物车中该件商品的数量,同时还有一个按钮用来执行存在于Provider中的onAddToCart
回调函数。
<CartContext>
的Provider处于上层组件<App>
中,同时商品信息列表也存于<App>
的state里。这就意味着Provider会随着state的改变而改变,Consumer也会随之收到一个新的value
。
我们在单独的文件里创建<CartContext>
,并且赋予其默认值。这样我们就可以在任何组件中引用它的Provider和Consumer。
import React from 'react';
export const CartContext =
React.createContext({
items: []
});
现在我们可以如下图一样,在Consumer中使用value
内的值:
获得完整样例源代码,请参阅。
是否该使用Context API
使用新的Context API可以为在多层嵌套的多个组件中使用共有数据带来极大的便利。React官方文档中也推荐使用Context API储存全局变量,例如当前登入用户,主题样式或是首选语言。使用Context API,可以减少多层prop-drilling的使用或是简化redux state结构。
是否使用Context API取决于程序的复杂程度,在大多数情况下,我(作者)还是推荐使用Redux。毕竟Redux是一个具有成熟生态圈的第三方库,其众多的中间件可以为我们解决许多开发中遇到的困难。在复杂度较小的程序中,Context API可以带来极大的便利。
关于Context API更多更详细的介绍,请参阅React官方文档。