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官方文档。