成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React Context API一覽

Cruise_Chan / 1894人閱讀

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

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

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

什么是Context API

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

應(yīng)該如何使用Context API

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

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

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

我們?cè)诙鄮У奈募飫?chuàng)建，并且賦予其默認(rèn)值。這樣我們就可以在任何組件中引用它的Provider和Consumer。

import React from "react";

export const CartContext = 
React.createContext({
  items: []
});

現(xiàn)在我們可以如下圖一樣，在Consumer中使用value內(nèi)的值：

獲得完整樣例源代碼，請(qǐng)參閱。

是否該使用Context API

使用新的Context API可以為在多層嵌套的多個(gè)組件中使用共有數(shù)據(jù)帶來極大的便利。React官方文檔中也推薦使用Context API儲(chǔ)存全局變量，例如當(dāng)前登入用戶，主題樣式或是首選語言。使用Context API，可以減少多層prop-drilling的使用或是簡(jiǎn)化redux state結(jié)構(gòu)。

是否使用Context API取決于程序的復(fù)雜程度，在大多數(shù)情況下，我（作者）還是推薦使用Redux。畢竟Redux是一個(gè)具有成熟生態(tài)圈的第三方庫，其眾多的中間件可以為我們解決許多開發(fā)中遇到的困難。在復(fù)雜度較小的程序中，Context API可以帶來極大的便利。

關(guān)于Context API更多更詳細(xì)的介紹，請(qǐng)參閱React官方文檔。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95516.html

相關(guān)文章

  • 比原鏈Bytom錯(cuò)誤碼一覽

    摘要：錯(cuò)誤編號(hào)內(nèi)容注釋非比原標(biāo)準(zhǔn)錯(cuò)誤請(qǐng)求超時(shí)非法的請(qǐng)求體為網(wǎng)絡(luò)錯(cuò)誤編號(hào)內(nèi)容注釋區(qū)塊鏈網(wǎng)絡(luò)類型不匹配是簽名相關(guān)的錯(cuò)誤編號(hào)內(nèi)容注釋需要簽名的個(gè)數(shù)超過實(shí)際需求簽名的個(gè)數(shù)簽名格式錯(cuò)誤缺少主公鑰主公鑰重復(fù)為交易相關(guān)的錯(cuò)誤構(gòu)建交易錯(cuò)誤編號(hào)內(nèi)容注釋資產(chǎn)余額不 0XX API錯(cuò)誤 編號(hào) 內(nèi)容 注釋 BTM000 Bytom API Error 非比原標(biāo)準(zhǔn)錯(cuò)誤 BTM001 Request t...

    Nosee 評(píng)論0 收藏0

  • Redux專題：實(shí)用

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

    Big_fat_cat 評(píng)論0 收藏0

  • 一覽js模塊化：從CommonJS到ES6

    摘要：模塊化規(guī)范有的模塊系統(tǒng)。規(guī)范是服務(wù)器端模塊的規(guī)范，由推廣使用。對(duì)于依賴的模塊，是提前執(zhí)行，是延遲執(zhí)行。瀏覽器廠商和都宣布要原生支持該規(guī)范。它將逐漸取代和規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。 本文由云+社區(qū)發(fā)表 模塊化是指把一個(gè)復(fù)雜的系統(tǒng)分解到一個(gè)一個(gè)的模塊。 模塊化開發(fā)的優(yōu)點(diǎn)： (1)代碼復(fù)用，讓我們更方便地進(jìn)行代碼管理、同時(shí)也便于后面代碼的修改和維護(hù)。 (2)一個(gè)單獨(dú)的文件就...

    antz 評(píng)論0 收藏0

  • 為什么你應(yīng)該放棄老的React Context API改用新的Context API

    摘要：發(fā)布了新的，并且已經(jīng)確認(rèn)了將在下一個(gè)版本廢棄老的。所以大家更新到新的是無可厚非的事情。 React16.3發(fā)布了新的Context API，并且已經(jīng)確認(rèn)了將在下一個(gè)版本廢棄老的Context API。所以大家更新到新的Context API是無可厚非的事情。而這篇文章會(huì)從原理的角度為大家分析為什么要用新的API--不僅僅是因?yàn)镽eact官方要更新，畢竟更新了你也可以用16版本的Reac...

    william 評(píng)論0 收藏0

  • React 新 Context API 在前端狀態(tài)管理的實(shí)踐

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

    wing324 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<