文章翻譯自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官方文檔。