亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

Redux、Flux、Vuex

joy968 / 3231人閱讀

摘要：結(jié)構(gòu)和數(shù)據(jù)流一個(gè)單向數(shù)據(jù)流是模式的核心，上面示圖應(yīng)該是程序員心中主要的模型圖。

前言

這篇文章不會(huì)用具體的代碼去闡述redux、flux或者vuex，因?yàn)槲矣X(jué)得它們所帶來(lái)的更是一種編程思想。

前端進(jìn)化和框架演變

在很久以前，前端沒(méi)有MVVM的概念，MVVM是對(duì)MVC細(xì)化的說(shuō)法（個(gè)人覺(jué)得兩者區(qū)別不大），MVC的模式一直在后臺(tái)使用，效果和優(yōu)點(diǎn)都很明顯。

后來(lái)前端工程師仿照MVC模式開(kāi)發(fā)了很多框架出來(lái)：backbonejs、angularjs、emberjs、knockoutjs等等。

再后來(lái)nodejs的崛起，出現(xiàn)了reactjs、vuejs、avalonjs,都是主打組件化，讓數(shù)據(jù)來(lái)驅(qū)動(dòng)視圖，再配合像grunt和webpack前端工具更是讓前端步入新的時(shí)代。

其實(shí)這里我想吐槽一下，前端從以前把注意力集中在布局和樣式，轉(zhuǎn)變成把精力投入到學(xué)習(xí)這些思想、工具、框架中，我做為一個(gè)前端工程師在這種過(guò)渡中覺(jué)得是一種力不從心（可能年齡大了，es6普及后不知道還要了解多少新東西），雖然是一個(gè)把注意力從視圖轉(zhuǎn)到數(shù)據(jù)上的轉(zhuǎn)變，但這過(guò)程其實(shí)要付出的挺多。

好，廢話到此為止。

Redux 思想

Redux讓你以一種新的方式思考開(kāi)發(fā)應(yīng)用個(gè)，這個(gè)方式是：狀態(tài)從一個(gè)初始狀態(tài)開(kāi)始，被一系列動(dòng)作序列改變，這種新方式是通往復(fù)雜Web應(yīng)用的捷徑。

這么一說(shuō)，很多人一頭霧水，啥意思？下面來(lái)個(gè)簡(jiǎn)單代碼

var store = {
  state: {
    message: "Hello!"
  },
  actionA: function () {
    this.state.message = "action A triggered"
  },
  actionB: function () {
    this.state.message = "action B triggered"
  }
}
//如果你想改變message的值，你可以調(diào)用actionA或者actionA去實(shí)現(xiàn)。

上面這段代碼可以說(shuō)就是Redux思想最簡(jiǎn)單的體現(xiàn)。

Flux

Flux是Facebook用戶建立客戶端Web應(yīng)用的前端架構(gòu)， 它通過(guò)利用一個(gè)單向的數(shù)據(jù)流補(bǔ)充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無(wú)需許多新代碼情況下立即開(kāi)始使用Flux

Flux應(yīng)用有三個(gè)主要部分：Dispatcher調(diào)度 、存儲(chǔ)Store和視圖View(React 組件)，這些不應(yīng)該和MVC:Model-View-Controll(模型-視圖-控制器)混淆，控制器在Flux應(yīng)用中是存在的，但是他們是controller-view(控制器-視圖)，視圖通常在一個(gè)結(jié)構(gòu)頂部，而這種結(jié)構(gòu)是用來(lái)從存儲(chǔ)stroe獲得數(shù)據(jù)，然后將數(shù)據(jù)傳遞到自己的子結(jié)構(gòu)們，此外，Action創(chuàng)建者-Dispatcher的幫助類(lèi)的方法 -用于支持一個(gè)語(yǔ)義API，這個(gè)API是描述應(yīng)用程序中所有變化的可能，通?？蓪⑺鼈兛闯墒荈lux更新循環(huán)的第四部分。

Flux是以單向數(shù)據(jù)流方式支持MVC，當(dāng)一個(gè)用戶和React視圖交互時(shí)，視圖會(huì)將這個(gè)動(dòng)作傳播到一個(gè)中央Dispatcher，一直到各種存儲(chǔ)，在那里保存著應(yīng)用的數(shù)據(jù)和業(yè)務(wù)邏輯，這個(gè)使用React的聲明式風(fēng)格的過(guò)程是非常棒的，能夠允許存儲(chǔ)發(fā)送更新信息，而無(wú)需指定在狀態(tài)之間如何切換視圖。(傳統(tǒng)方式更新?tīng)顟B(tài)后，會(huì)推出一個(gè)新的視圖頁(yè)面。)

Flux最初是用于正確導(dǎo)出數(shù)據(jù)，比如如果我們要顯示一系列消息的未讀數(shù)字，而另外一個(gè)視圖顯示的是所有消息，其中未讀的消息會(huì)高亮顯示。這種情況使用MVC很難處理，將一個(gè)消息變?yōu)橐炎x狀態(tài)需要更新消息模型，然后再需要更新未讀的計(jì)數(shù)模型(將未讀模型數(shù)字減1，因?yàn)閯偘l(fā)生一個(gè)已讀改變)，這種依賴和級(jí)聯(lián)更新經(jīng)常發(fā)生在大型MVC應(yīng)用，導(dǎo)致一個(gè)混亂的數(shù)據(jù)流編織和不可預(yù)知的結(jié)果。

控制器被存儲(chǔ)反轉(zhuǎn)控制：存儲(chǔ)接受更新，適當(dāng)?shù)卣{(diào)節(jié)這些更新，而不是一致地依賴外部更新其數(shù)據(jù)，存儲(chǔ)之外根本不知道它是如何管理領(lǐng)域數(shù)據(jù)的，這有助于實(shí)現(xiàn)一種清晰的分離關(guān)注。存儲(chǔ)并沒(méi)有直接的類(lèi)似setAsRead()之類(lèi)的方法，而是只有一個(gè)單一方式獲取數(shù)據(jù)到其自成一體的世界中，這個(gè)方式就是回調(diào)，注冊(cè)在dispatcher中的callback。

結(jié)構(gòu)和數(shù)據(jù)流

一個(gè)單向數(shù)據(jù)流是Flux模式的核心，上面示圖應(yīng)該是Flux程序員心中主要的模型圖。dispatcher 存儲(chǔ)和視圖是有著不同輸入輸出的獨(dú)立節(jié)點(diǎn)，Action動(dòng)作是一個(gè)簡(jiǎn)單對(duì)象，只是包含新的數(shù)據(jù)和一個(gè)標(biāo)識(shí)符類(lèi)型的屬性。

視圖也許引起新的動(dòng)作Action，這個(gè)動(dòng)作作為用戶交互的響應(yīng)將在整個(gè)系統(tǒng)傳播：

所有通過(guò)dispatcher的數(shù)據(jù)流將作為一個(gè)集中式Hub，動(dòng)作Action在一個(gè)action creator方法中被提供給dispatcher，這個(gè)動(dòng)作通常來(lái)自于視圖中用戶的交互，dispatcher然后調(diào)用存儲(chǔ)已經(jīng)注冊(cè)其中的回調(diào)函數(shù)，分發(fā)Action動(dòng)作到所有的存儲(chǔ)，在它們注冊(cè)的回調(diào)函數(shù)中，存儲(chǔ)會(huì)響應(yīng)每個(gè)和它保存的狀態(tài)有關(guān)的每個(gè)動(dòng)作Action，存儲(chǔ)然后發(fā)射一個(gè) change改變的事件去提醒controller-view（控制器-視圖），更新到剛剛改變的新數(shù)據(jù)。controller-view監(jiān)聽(tīng)這些事件，然后在一個(gè)事件處理器中從存儲(chǔ)中獲取數(shù)據(jù)，controller-view調(diào)用它們自己的"setState()"方法，這會(huì)觸發(fā)視圖的重新渲染，包括DOM組件樹(shù)中所有更新

通過(guò)應(yīng)用的數(shù)據(jù)流是一個(gè)方向，沒(méi)有兩邊綁定(two-way bingding：Angular.js有此方式)，應(yīng)用狀態(tài)在存儲(chǔ)中維護(hù)，允許應(yīng)用不同部分保持解耦，在存儲(chǔ)之間發(fā)生依賴的地方，它們能夠保持嚴(yán)格的層次關(guān)系（設(shè)計(jì)原則：盡量松耦合，無(wú)法回避的就變成樹(shù)形層次結(jié)構(gòu)），同步管理由dispatcher負(fù)責(zé)。

分享

說(shuō)了那么多，重點(diǎn)還是上面兩張圖，知道了這個(gè)流程，就掌握了它的大概思想，如果你還是不懂，這里分享個(gè)人認(rèn)為比較好的文章：

怎樣理順react，flux，redux這些概念的關(guān)系，開(kāi)發(fā)中有必要使用它們嗎?

Redux 介紹

關(guān)于Vuex的幾個(gè)疑問(wèn)

vuex介紹

[譯] Flux 入門(mén)

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

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

相關(guān)文章

  • 關(guān)于Flux,Vuex,Redux的思考

    摘要：關(guān)于的思考是一種前端狀態(tài)管理架構(gòu)思想，專(zhuān)門(mén)解決軟件的結(jié)構(gòu)問(wèn)題。他們給出了一些庫(kù)用于實(shí)現(xiàn)的思想，并在的基礎(chǔ)上做了一些改進(jìn)。在這些框架里，當(dāng)前最熱門(mén)的莫過(guò)于和了。 關(guān)于Flux,Vuex,Redux的思考 Flux是一種前端狀態(tài)管理架構(gòu)思想，專(zhuān)門(mén)解決軟件的結(jié)構(gòu)問(wèn)題?；贔lux的設(shè)計(jì)思想，出現(xiàn)了一批前端狀態(tài)管理框架。他們給出了一些庫(kù)用于實(shí)現(xiàn)Flux的思想，并在Flux的基礎(chǔ)上做了一些改進(jìn)。...

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

  • Flux,Vuex,Redux

    摘要：是一種前端狀態(tài)管理架構(gòu)思想，專(zhuān)門(mén)解決軟件的結(jié)構(gòu)問(wèn)題?；诘脑O(shè)計(jì)思想，出現(xiàn)了一批前端狀態(tài)管理框架。他們給出了一些庫(kù)用于實(shí)現(xiàn)的思想，并在的基礎(chǔ)上做了一些改進(jìn)。在這些框架里，當(dāng)前最熱門(mén)的莫過(guò)于和了。 Flux Flux是一種前端狀態(tài)管理架構(gòu)思想，專(zhuān)門(mén)解決軟件的結(jié)構(gòu)問(wèn)題。 基于Flux的設(shè)計(jì)思想，出現(xiàn)了一批前端狀態(tài)管理框架。他們給出了一些庫(kù)用于實(shí)現(xiàn)Flux的思想，并在Flux的基礎(chǔ)上做了一些改...

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

  • Vuex、Flux、Redux、Redux-saga、Dva、MobX

    摘要：也就是說(shuō)不應(yīng)該有公開(kāi)的，所有都應(yīng)該是私有的，只能有公開(kāi)的。允許使用方法設(shè)置監(jiān)聽(tīng)函數(shù)，一旦發(fā)生變化，就自動(dòng)執(zhí)行這個(gè)函數(shù)。用一個(gè)叫做的純函數(shù)來(lái)處理事件?？梢酝ㄟ^(guò)得到當(dāng)前狀態(tài)。在中，同步的表現(xiàn)就是發(fā)出以后，立即算出。 這篇文章試著聊明白這一堆看起來(lái)挺復(fù)雜的東西。在聊之前，大家要始終記得一句話：一切前端概念，都是紙老虎。 不管是Vue，還是 React，都需要管理狀態(tài)（state），比如組件之...

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

  • react之redux狀態(tài)管理

    摘要：傳統(tǒng)框架的缺陷傳統(tǒng)框架的缺陷模型視圖控制器的縮寫(xiě)即視圖用戶看到并與之交互的界面。即模型是管理數(shù)據(jù)很多業(yè)務(wù)邏輯都在模型中完成。在的三個(gè)部件中，模型擁有最多的處理任務(wù)。所有的狀態(tài)，保存在一個(gè)對(duì)象里面唯一數(shù)據(jù)源。1、傳統(tǒng)MVC框架的缺陷 模型(model)－視圖(view)－控制器(controller)的縮寫(xiě) V即View視圖：用戶看到并與之交互的界面。 M即Model模型是管理數(shù)...

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

  • react-redux 開(kāi)發(fā)實(shí)踐與學(xué)習(xí)分享

    摘要：簡(jiǎn)介是一個(gè)狀態(tài)管理的庫(kù)，由基礎(chǔ)上開(kāi)發(fā)出來(lái)，與的主要區(qū)別是只有一個(gè)，關(guān)于，后文會(huì)詳述。這個(gè)函數(shù)接受四個(gè)參數(shù)，它們分別是，，和。之前在注冊(cè)頁(yè)面，如果沒(méi)有滿足相關(guān)條件，則觸發(fā)的行為。具體定義了項(xiàng)目中觸發(fā)的行為類(lèi)別，通過(guò)屬性來(lái)區(qū)別于不同的行為。 redux簡(jiǎn)介 redux是一個(gè)js狀態(tài)管理的庫(kù)，由flux基礎(chǔ)上開(kāi)發(fā)出來(lái)，與flux的主要區(qū)別是只有一個(gè)store，關(guān)于store，后文會(huì)詳述。在各...

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

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

0條評(píng)論

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