React Context API一览

文章翻译自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官方文档。