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

資訊專欄INFORMATION COLUMN

Redux、Flux、Vuex

joy968 / 3179人閱讀

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

前言

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

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

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

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

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

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

好，廢話到此為止。

Redux 思想

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

這么一說，很多人一頭霧水，啥意思？下面來個(gè)簡單代碼

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)。

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

Flux

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

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

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

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

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

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

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

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

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

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

分享

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

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

Redux 介紹

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

vuex介紹

[譯] Flux 入門

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

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

相關(guān)文章

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

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

    jsbintask 評論0 收藏0

  • Flux,Vuex,Redux

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

    anonymoussf 評論0 收藏0

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

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

    hiYoHoo 評論0 收藏0

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

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

    J4ck_Chan 評論0 收藏0

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

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

    imccl 評論0 收藏0

發(fā)表評論

0條評論

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