国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Redux專題：考古

toddmark / 3440人閱讀

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

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

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

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

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

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

MVC

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

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

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

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

Flux

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

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

Action，一個動作對象，相當于用戶的指令。

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

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

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

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

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

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

Redux

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

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

我認為Redux的貢獻主要是這兩點：

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

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

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

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

壞處是什么呢？

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

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

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

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

再來說函數(shù)式編程。

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

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

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

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

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

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

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

Redux專題一覽

考古
實用
中間件
時間旅行

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97891.html

相關(guān)文章

  • Redux專題：實用

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

    Big_fat_cat 評論0 收藏0

  • Redux專題：中間件

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

    ybak 評論0 收藏0

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

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

    darcrand 評論0 收藏0

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

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

    myeveryheart 評論0 收藏0

  • 深入理解JavaScript

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

    myeveryheart 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<