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