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

資訊專欄INFORMATION COLUMN

深入理解redux

pekonchan / 3307人閱讀

摘要：深入簡(jiǎn)述在快速理解中，我簡(jiǎn)單的介紹了的基礎(chǔ)內(nèi)容，本篇文章中，我們將再度深入。二修改我曾在快速理解中提起，為了解決模塊組件之間需要共享數(shù)據(jù)和數(shù)據(jù)可能被任意修改導(dǎo)致不可預(yù)料的結(jié)果的矛盾，團(tuán)隊(duì)創(chuàng)建了。

深入Redux 簡(jiǎn)述

在快速理解redux中，我簡(jiǎn)單的介紹了redux的基礎(chǔ)內(nèi)容，本篇文章中，我們將再度深入redux。

redux解決的問(wèn)題

數(shù)據(jù)和函數(shù)的層層傳遞

多個(gè)組件同時(shí)修改某全局變量

一、react數(shù)據(jù)流

眾所周知，react的單向數(shù)據(jù)流是這樣的，父組件可以向子組件傳遞數(shù)據(jù)

我們通常用過(guò)狀態(tài)提升將數(shù)據(jù)存于高階函數(shù)中，使我們的子組件盡可能的更"純"，更好的實(shí)現(xiàn)代碼復(fù)用。

可能在頁(yè)面結(jié)構(gòu)簡(jiǎn)單的小型項(xiàng)目中我們還沒(méi)覺(jué)得有什么不妥，但是倘若在頁(yè)面結(jié)構(gòu)稍復(fù)雜的項(xiàng)目中，就會(huì)變成這樣

D組件中的數(shù)據(jù)存于Container中，要通過(guò)Container -> Content -> B -> D才能到達(dá)D組件。
當(dāng)然，這對(duì)我們聰明有能干的開(kāi)發(fā)者們并不算什么，耗些時(shí)間也能剛出來(lái)。

Then，這種頁(yè)面，你還能搞得定嗎？

就算你能搞定，你的代碼中也有大量的冗余，從Container到N之間的所有組件都要傳遞N需要的props

所以，為了解決層層傳遞,react-redux就出現(xiàn)了
它利用了react中的context，在Container的context里創(chuàng)建store，使Container的所有子組件，孫組件等等都可以直接獲取store中的內(nèi)容。

二、修改store

我曾在快速理解redux中提起，為了解決模塊（組件）之間需要共享數(shù)據(jù) 和 數(shù)據(jù)可能被任意修改導(dǎo)致不可預(yù)料的結(jié)果 的矛盾，redux團(tuán)隊(duì)創(chuàng)建了dispatch。So 不可預(yù)料的結(jié)果究竟是什么？

我們思考一個(gè)問(wèn)題，假如所有的組件都以 store.xxx = xxx; // 偽代碼 這種方式修改全局變量，會(huì)引發(fā)什么問(wèn)題？

我們?cè)偎伎?，為何python等語(yǔ)言會(huì)存在線程鎖，數(shù)據(jù)庫(kù)也存在鎖，操作系統(tǒng)的生產(chǎn)者/消費(fèi)者問(wèn)題等等
假如A和B同時(shí)修改store，store是遵從A還是遵從B？

為了避免以上情況引發(fā)死鎖redux想出了一個(gè)辦法：封裝一個(gè)dispatch函數(shù)，接收一個(gè)action對(duì)象作為參數(shù)，每當(dāng)組件想要修改store時(shí)必須給dispatch傳遞action，然后再store內(nèi)部根據(jù)action對(duì)象的type將dispatch分發(fā)到相應(yīng)的隊(duì)列中，每一時(shí)刻僅執(zhí)行一個(gè)dispatch

三、redux異步問(wèn)題

思考這樣一個(gè)情景，我們從后端的接口獲取了數(shù)據(jù)，我們想將其存入store中。但是當(dāng)執(zhí)行到reducer時(shí)，數(shù)據(jù)是否已經(jīng)獲取到？假如沒(méi)有，又該怎么辦？
就在此時(shí)，中間件出現(xiàn)了，例如 redux-saga, redux-thunk 等等。

redux-saga 使用了generate生成器，使開(kāi)發(fā)者可以按同步思路的書寫異步代碼，再根據(jù)action的type選擇相應(yīng)reducer更新store

function *fetchNodeDetailByNodeId({ payload: { nodeId } }, { call, put }) {
  try {
    const { data, status }= yield call(fetchNodeDetailByNodeId, nodeId)
    if (data && status.errmsg === "success") {
      yield put({
        type: "setStates",
        payload: {
          nodeDetailData: data,
        },
      });
    } else {
      message.info("開(kāi)了個(gè)小差,再試一次吧..");
    }
  } catch (error) {
    console.log(error);
  }
},

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

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

相關(guān)文章

  • 深入淺出redux學(xué)習(xí)（-）

    摘要：只要輸入的值不變，每次輸出都是一樣的值。指定位置元素運(yùn)算操作如可用以下方式代替主要是生成中最核心的對(duì)象。描述發(fā)生了什么，是響應(yīng)并對(duì)進(jìn)行更新。生成的對(duì)象包含個(gè)方法，分別為，和。按照約定，具有字段來(lái)表示它的類型。 前言： 一開(kāi)始接觸redux的時(shí)候最令我記住的一句話是：You Might Not Need Redux（那我還寫這篇文章干嘛？手動(dòng)滑稽） 回歸正題，本文主要是圍繞redux...

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

  • redux 資料合集

    摘要：資料合集學(xué)習(xí)有段時(shí)間了，相關(guān)不錯(cuò)的資料整理下，希望能幫到有緣人五顆星推薦中文文檔通讀不下邊，翻譯的很好，想理解清楚，定下心來(lái)，認(rèn)真讀，必有收獲官方推薦資料合集，沒(méi)有啥說(shuō)的中間件深入淺出就因?yàn)榭戳诉@篇文章才更加深入學(xué)習(xí)，同時(shí)對(duì)有了別樣的看法 redux 資料合集 學(xué)習(xí)redux有段時(shí)間了，相關(guān)不錯(cuò)的資料整理下，希望能幫到有緣人 五顆星推薦 中文文檔 通讀不下3邊，翻譯的很好，想理解清楚...

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

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過(guò)一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽(tīng)，完成整個(gè)狀態(tài)樹(shù)的更新。總而言之，遵守這套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來(lái)。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來(lái)，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

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

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過(guò)一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽(tīng)，完成整個(gè)狀態(tài)樹(shù)的更新?？偠灾袷剡@套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來(lái)。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來(lái)，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

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

  • 深入理解JavaScript

    摘要：深入之繼承的多種方式和優(yōu)缺點(diǎn)深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。對(duì)于解釋型語(yǔ)言例如來(lái)說(shuō)，通過(guò)詞法分析語(yǔ)法分析語(yǔ)法樹(shù)，就可以開(kāi)始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點(diǎn) JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 寫在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 但是注意： 這篇文章更像是筆記，哎，再讓我...

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

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

0條評(píng)論

pekonchan

男|高級(jí)講師

TA的文章

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