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

資訊專欄INFORMATION COLUMN

Redux專題：考古

toddmark / 3447人閱讀

摘要：光憑一個(gè)是無(wú)法實(shí)現(xiàn)血緣關(guān)系疏遠(yuǎn)的組件之間的狀態(tài)同步的。就是為解決這個(gè)問(wèn)題而生的。，處理動(dòng)作的派發(fā)，相當(dāng)于架構(gòu)的。我們的主角是，它也是目前社區(qū)最受歡迎的狀態(tài)管理框架。專題一覽考古實(shí)用中間件時(shí)間旅行

本文是『horseshoe·Redux專題』系列文章之一，后續(xù)會(huì)有更多專題推出
來(lái)我的 GitHub repo 閱讀完整的專題文章
來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn)

React的橫空出世給前端帶來(lái)一場(chǎng)革命。其實(shí)隨React一同開源的還有一個(gè)叫Flux的東西。Flux是管理應(yīng)用狀態(tài)的一種架構(gòu)。光憑一個(gè)props是無(wú)法實(shí)現(xiàn)血緣關(guān)系疏遠(yuǎn)的組件之間的狀態(tài)同步的。雖然context加回調(diào)可以勉強(qiáng)做到這一點(diǎn)，但是Flux架構(gòu)有其更加深遠(yuǎn)的意義。

你看，從一開始facebook的工程師就知道只憑React無(wú)法支撐大型的應(yīng)用開發(fā)。但是為什么稱Flux為一種架構(gòu)而不是一個(gè)類庫(kù)或者框架呢？因?yàn)樗某霈F(xiàn)主要是為了提出一種思想，而不是作為一個(gè)真正成熟的類庫(kù)。facebook的工程師希望社區(qū)根據(jù)這種思想涌現(xiàn)出多樣化的實(shí)現(xiàn)方式。

那么，F(xiàn)lux提出的思想是什么呢？

這一切還要從MVC架構(gòu)說(shuō)起。

MVC

以前端舉例，MVC架構(gòu)將一個(gè)應(yīng)用分為Model 、View和 Controller三部分。Model 代表數(shù)據(jù)模型，用來(lái)存放業(yè)務(wù)邏輯；View代表視圖，是最終的界面效果；Controller代表控制器，響應(yīng)用戶的操作。

一個(gè)用戶操作View發(fā)出指令，Controller處理該指令并且將處理結(jié)果傳遞給Model，Model再將更新后的數(shù)據(jù)渲染到View上。

當(dāng)一個(gè)應(yīng)用越來(lái)越復(fù)雜時(shí)，如何去維護(hù)龐大的代碼和讓新人快速的上手就變的緊迫起來(lái)。MVC架構(gòu)的分層思想就是服務(wù)于這一目的，它并不能讓應(yīng)用的性能提升，但是它可以讓代碼對(duì)開發(fā)者更友好。不過(guò)影響代碼對(duì)開發(fā)者友好度的可不止這一點(diǎn)，更重要的是數(shù)據(jù)的流向在開發(fā)者面前的清晰度。

MVC架構(gòu)有沒有對(duì)數(shù)據(jù)的流向做很好的控制呢？并沒有。它有一套理想中的流程，就是上面講到的視圖更新的操作過(guò)程，然而View可不可以直接給Model發(fā)指令？當(dāng)然可以，并且很多開發(fā)者就是這么做的。如果每一層都可以和每一層通信，代碼的可讀性將變的混亂不堪。

Flux

Flux就是為解決這個(gè)問(wèn)題而生的。MVC架構(gòu)的問(wèn)題在于沒有嚴(yán)格控制數(shù)據(jù)的流向，所以facebook的工程師將Flux設(shè)計(jì)成數(shù)據(jù)只能走單通道，一個(gè)特定的操作才能觸發(fā)另一個(gè)特定的操作。

一個(gè)Flux應(yīng)用包含四部分：

Action，一個(gè)動(dòng)作對(duì)象，相當(dāng)于用戶的指令。

Dispatcher，處理動(dòng)作的派發(fā)，相當(dāng)于MVC架構(gòu)的Controller。

Store，負(fù)責(zé)存儲(chǔ)數(shù)據(jù)，相當(dāng)于MVC架構(gòu)的Model。

View，和MVC架構(gòu)一樣。

用戶觸發(fā)View上的事件發(fā)送Action，Action只能通過(guò)Dispatcher.dispatch方法發(fā)送出去，Store更新自身的數(shù)據(jù)然后View根據(jù)Store重新渲染。一環(huán)扣一環(huán)，只能按照這個(gè)流程走下去。

這就是我們說(shuō)的單向數(shù)據(jù)流。

至此，我們實(shí)現(xiàn)了功能的分層和數(shù)據(jù)的單向流動(dòng)，代碼不再那么混亂了。

Redux

我們的主角是Redux，它也是目前React社區(qū)最受歡迎的狀態(tài)管理框架。實(shí)際上，Redux就是Flux的門徒之一。它如此受歡迎，一定是因?yàn)樗贔lux的基礎(chǔ)上做對(duì)了什么事情。

Flux解決了單向數(shù)據(jù)流的問(wèn)題，那么Redux解決了什么問(wèn)題呢？

我認(rèn)為Redux的貢獻(xiàn)主要是這兩點(diǎn)：

推崇唯一數(shù)據(jù)源。

加入函數(shù)式編程思想。狀態(tài)只讀和只能通過(guò)純函數(shù)來(lái)改變狀態(tài)都是函數(shù)式編程的特性，目的就是為了改變狀態(tài)的過(guò)程中不產(chǎn)生副作用。

咱們先來(lái)說(shuō)說(shuō)唯一數(shù)據(jù)源是怎么回事？

Flux的設(shè)計(jì)是將每一塊相對(duì)獨(dú)立的狀態(tài)分別用一個(gè)Store來(lái)存儲(chǔ)。這樣的好處是顯而易見的，每一個(gè)Store的體積都足夠小，對(duì)象的嵌套不會(huì)很深。

壞處是什么呢？

Dispatcher在派發(fā)動(dòng)作的時(shí)候，會(huì)依次訪問(wèn)每一個(gè)Store。這樣雖然會(huì)損失一些性能，但是Dispatcher的邏輯可以做到極簡(jiǎn)，它不用知道這個(gè)動(dòng)作應(yīng)該派發(fā)給誰(shuí)，都給它們發(fā)一遍得了。假如Store A對(duì)Store B存在依賴關(guān)系，那么它們的狀態(tài)更新順序就很重要，而Dispatcher哪管這些個(gè)兒女情長(zhǎng)。于是開發(fā)者需要通過(guò)Dispatcher注冊(cè)回調(diào)函數(shù)返回的token來(lái)手動(dòng)管理Store之間的依賴關(guān)系。

這無(wú)疑又是對(duì)開發(fā)者不友好的設(shè)計(jì)。

所以Redux干脆，只維護(hù)一個(gè)全局的Store，讓你開發(fā)者再嗶嗶嗶。正事不干，就知道嗶嗶嗶。

需要注意的是，Redux并沒有從機(jī)制上阻止開發(fā)者使用多個(gè)Store管理應(yīng)用，開發(fā)者還是可以作妖的。不過(guò)這又回到Flux的老路上去了，對(duì)開發(fā)者一點(diǎn)好處都沒有。Redux選擇用思想和約定來(lái)約束開發(fā)者。

再來(lái)說(shuō)函數(shù)式編程。

函數(shù)式編程思想的提出最早是為了處理復(fù)雜的計(jì)算任務(wù)。計(jì)算任務(wù)的要求是什么呢？結(jié)果可預(yù)期，任務(wù)之間不會(huì)相互影響。

相同的輸入，總是有相同的輸出。對(duì)應(yīng)到函數(shù)，就是不能修改已有的數(shù)據(jù)，只要修改已有的數(shù)據(jù)，理論上就有可能輸出不同的結(jié)果。那么我確實(shí)有修改數(shù)據(jù)的需求怎么辦？生成一個(gè)新的衍生數(shù)據(jù)。

執(zhí)行某個(gè)任務(wù)不會(huì)對(duì)外部產(chǎn)生影響，也就是所謂的沒有副作用。

我們想一下，Redux加入函數(shù)式編程思想的目的不還是為了讓單項(xiàng)數(shù)據(jù)流更加清晰和單純么？

Redux給前端帶來(lái)的另一個(gè)重大成果是時(shí)間旅行式的調(diào)試。開發(fā)者可以回到任意時(shí)間點(diǎn)的案發(fā)現(xiàn)場(chǎng)，看看那個(gè)臭蟲到底是哪個(gè)陰溝里生出來(lái)的。

如果你看完本專題，就會(huì)發(fā)現(xiàn)Redux的作者Dan Abramov從一開始設(shè)計(jì)Redux就是奔著時(shí)間旅行式的調(diào)試去的。時(shí)間旅行才是Redux寫法這么繁瑣的罪魁禍?zhǔn)住?/p>

所以Flux的歷史功績(jī)是為前端引入了一種思想，而Redux僅僅是改進(jìn)這種思想而已，還算不上一代宗師。不過(guò)Redux本來(lái)就是Flux的門徒之一，作為門徒能夠?qū)熼T發(fā)揚(yáng)光大也是一代豪杰了。

Redux專題一覽

考古
實(shí)用
中間件
時(shí)間旅行

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

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

相關(guān)文章

  • Redux專題：實(shí)用

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

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

  • Redux專題：中間件

    摘要：好處就是不再需要能夠處理異步的中間件了。不過(guò)，它是一個(gè)研究中間件很好的范本。執(zhí)行它，返回的是由第二層函數(shù)組成的中間件數(shù)組。也就是說(shuō)呀同學(xué)們，除了最后一個(gè)中間件的是原始的之外，倒數(shù)往前的中間件傳入的都是上一個(gè)中間件的邏輯函數(shù)。 本文是『horseshoe·Redux專題』系列文章之一，后續(xù)會(huì)有更多專題推出來(lái)我的 GitHub repo 閱讀完整的專題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱...

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

  • React專題：react，redux以及react-redux常見一些面試題

    摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。使用最常見的用法就是傳入一個(gè)對(duì)象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫(kù)的開發(fā)而被概念化。 面試中問(wèn)框架，經(jīng)常會(huì)問(wèn)到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時(shí)卻答不上來(lái)，也是挺尷尬的，就干脆把react相關(guān)的問(wèn)題查了下資料，再按自己的理解整理了下這些答案。 reac...

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

  • [NG] 考古 - HttpInterceptor 循環(huán)引用錯(cuò)誤

    摘要：官網(wǎng)也給出了范例，以下代碼可以實(shí)現(xiàn)一個(gè)攔截器問(wèn)題描述但在之前，執(zhí)行上述官方給出的代碼是會(huì)報(bào)錯(cuò)的?？梢垣@取攔截器服務(wù)的實(shí)例們。 原文首發(fā)于 baishusama.github.io，歡迎圍觀～ 前言 恍然間發(fā)現(xiàn)這個(gè)錯(cuò)誤已經(jīng)不復(fù)存在了，于是稍微看了下相關(guān) issue、commit、PR。寫篇筆記祭奠下～ 需求描述 一個(gè)使用 HttpInterceptor 的常見場(chǎng)景是實(shí)現(xiàn)基于 token ...

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

  • 深入理解JavaScript

    摘要：深入之繼承的多種方式和優(yōu)缺點(diǎn)深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。對(duì)于解釋型語(yǔ)言例如來(lái)說(shuō)，通過(guò)詞法分析語(yǔ)法分析語(yǔ)法樹，就可以開始解釋執(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)論

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