React Context API一覽

Cruise_Chan 發布于2019-08-22 18:07 / 1888人閱讀

摘要：若后者存在于前者的子組件中，那么無論后者處于前者子組件的哪個位置，前者可以向后者直接提供數據。每一個商品都有一個用于顯示購物車中該件商品的數量，同時還有一個按鈕用來執行存在于中的回調函數。這就意味著會隨著的改變而改變，也會隨之收到一個新的。

文章翻譯自Seth Corker的A look at the React Context API，并且不是百分之百原文翻譯，一些譯者認為并不重要的部分被省略了，同時也加入一些原文內未出現的解釋性文字。如果想要閱讀原文，請轉至https://medium.com/front-end-...

React 16帶來了許多非常棒的新功能（雖然異步渲染還是不見蹤影），新的Context API便是其中之一。

什么是Context API

Context API包含兩個組件，和。若后者（Consumer）存在于前者(Provider)的子組件（children）中，那么無論后者處于前者子組件的哪個位置，前者可以向后者直接提供數據。

應該如何使用Context API

我（作者）制作了一個購物車樣例來展示Context API是如何工作的，源碼在https://github.com/Darth-Knop...。

上圖顯示了商品是如何加入購物車或從購物車中移除的。每一個商品都有一個Consumer用于顯示購物車中該件商品的數量，同時還有一個按鈕用來執行存在于Provider中的onAddToCart回調函數。

的Provider處于上層組件中，同時商品信息列表也存于的state里。這就意味著Provider會隨著state的改變而改變，Consumer也會隨之收到一個新的value。

我們在多帶帶的文件里創建，并且賦予其默認值。這樣我們就可以在任何組件中引用它的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官方文檔。

云服務器 GPU云服務器 Context 獲取context stacking-context Android全局Context

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95516.html

比原鏈Bytom錯誤碼一覽

摘要：錯誤編號內容注釋非比原標準錯誤請求超時非法的請求體為網絡錯誤編號內容注釋區塊鏈網絡類型不匹配是簽名相關的錯誤編號內容注釋需要簽名的個數超過實際需求簽名的個數簽名格式錯誤缺少主公鑰主公鑰重復為交易相關的錯誤構建交易錯誤編號內容注釋資產余額不 0XX API錯誤編號內容注釋 BTM000 Bytom API Error 非比原標準錯誤 BTM001 Request t...

Nosee 2019-06-27 18:49 評論0 收藏0
Redux專題：實用

摘要：在英文中的意思是有效載荷。有一個動作被發射了顧名思義，替換，這主要是方便開發者調試用的。相同的輸入必須返回相同的輸出，而且不能對外產生副作用。怎么辦呢開發者得手動維護一個訂閱器，才能監聽到狀態變化，從而觸發頁面重新渲染。本文是『horseshoe·Redux專題』系列文章之一，后續會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的個人博客獲得無與倫比的閱讀體...

Big_fat_cat 2019-08-23 12:04 評論0 收藏0
一覽js模塊化：從CommonJS到ES6

摘要：模塊化規范有的模塊系統。規范是服務器端模塊的規范，由推廣使用。對于依賴的模塊，是提前執行，是延遲執行。瀏覽器廠商和都宣布要原生支持該規范。它將逐漸取代和規范，成為瀏覽器和服務器通用的模塊解決方案。本文由云+社區發表模塊化是指把一個復雜的系統分解到一個一個的模塊。模塊化開發的優點： (1)代碼復用，讓我們更方便地進行代碼管理、同時也便于后面代碼的修改和維護。 (2)一個單獨的文件就...

antz 2019-08-23 14:15 評論0 收藏0
為什么你應該放棄老的React Context API改用新的Context API

摘要：發布了新的，并且已經確認了將在下一個版本廢棄老的。所以大家更新到新的是無可厚非的事情。 React16.3發布了新的Context API，并且已經確認了將在下一個版本廢棄老的Context API。所以大家更新到新的Context API是無可厚非的事情。而這篇文章會從原理的角度為大家分析為什么要用新的API--不僅僅是因為React官方要更新，畢竟更新了你也可以用16版本的Reac...

william 2019-08-23 12:08 評論0 收藏0
React 新 Context API 在前端狀態管理的實踐

摘要：本文轉載至今日頭條技術博客眾所周知，的單向數據流模式導致狀態只能一級一級的由父組件傳遞到子組件，在大中型應用中較為繁瑣不好管理，通常我們需要使用來幫助我們進行管理，然而隨著的發布，新成為了新的選擇。本文轉載至：今日頭條技術博客showImg(https://segmentfault.com/img/bVbiNJO?w=900&h=383);眾所周知，React的單向數據流模式導致狀態...

wing324 2019-08-02 11:51 評論0 收藏0