99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

Redux 先前技術

2021-09-16 09:50 更新

先前技術

Redux 是一個混合產(chǎn)物。它和一些設計模式及技術相似,但也有不同之處。讓我們來探索一下這些相似與不同。

Flux

Redux 可以被看作 Flux 的一種實現(xiàn)嗎?,也可以說 不是

(不用擔心,Flux 的作者認可它,如果你好奇這一點。)

Redux 是從很多有質(zhì)量的 Flux 的實現(xiàn)中產(chǎn)生的靈感。和 Flux 一樣,Redux 規(guī)定,將模型的更新邏輯全部集中于一個特定的層(Flux 里的 store,Redux 里的 reducers)。還想告訴你的是,它不使用應用代碼直接變動數(shù)據(jù),而用一個叫作 “action” 的普通對象來對變化進行描述。

而不同于 Flux ,Redux 沒有 dispatcher 的概念。原因是它依賴純函數(shù)來替代事件處理器。純函數(shù)構(gòu)建簡單,也不需額外的實體來管理它們。你可以將點這看作這兩個框架的差異或細節(jié)實現(xiàn),取決于你怎么看 Flux。Flux 常常被表述為 (state, action) => state。從這個意義上說,Redux 無疑是 Flux 架構(gòu)的實現(xiàn),且得益于其純函數(shù)而更為簡單。

和 Flux 的另一個重要區(qū)別,是 Redux 設想你永遠不會變動你的數(shù)據(jù)。你可以很好地使用普通對象和數(shù)組來管理 state ,而不是在多個 reducer 里變動數(shù)據(jù),這會讓你深感挫折。正確的方式是,你應該在 reducer 中返回一個新對象來更新 state, 同時配合 ES7 所提議的 object spread 語法Babel,或者一些庫,如 Immutable ,這種做法簡單易行。

雖然出于性能方面的考慮,寫不純的 reducer 來變動數(shù)據(jù)在技術上是可行的,但我們并不鼓勵這么做。不純的 reducer 會使一些開發(fā)特性,如時間旅行、記錄/回放或熱加載不可實現(xiàn)。此外,在大部分實際應用中,這種數(shù)據(jù)不可變動的特性并不會帶來性能問題,就像 Om 所表現(xiàn)的,即使對象分配失敗,仍可以防止昂貴的重渲染和重計算。而得益于 reducer 的純度,應用內(nèi)的變化更是一目了然。

Elm

Elm 是一種函數(shù)式編程語言,由 Evan Czaplicki 受 Haskell 語言的啟發(fā)開發(fā)。它執(zhí)行一種 “model view update” 的架構(gòu) ,更新遵循 (state, action) => state 的規(guī)則。 從技術上說,Elm 的 “dater” 等同于 Redux 里的 reducer。

不同于 Redux,Elm 是一門語言,因此它在執(zhí)行純度,靜態(tài)類型,不可變動性,action 和模式匹配等方面更具優(yōu)勢。即使你不打算使用 Elm,也可以讀一讀 Elm 的架構(gòu),嘗試一把?;诖?,有一個有趣的使用 JavaScript 庫實現(xiàn)類似想法 的項目。我們能看到 Redux 從中取得的靈感! 為了更接近 Elm 的靜態(tài)類型,它使用了一個類似 Flow 的漸進類型解決方案 。

Immutable

Immutable 是一個可實現(xiàn)不可變數(shù)據(jù)結(jié)構(gòu)的 JavaScript 庫。它十分高性能,并擁有常用的 JavaScript API。

Immutable 及類似的庫都與 Redux 對接良好。盡可隨意地一起使用!

Redux 并不在意你 如何 存儲 state,state 可以是普通對象,可以是不可變對象,或者其它類型。 為了從 server 端寫同構(gòu)應用或融合它們的 state ,你可能要用到序列化或反序列化的機制。但除此以外,你可以使用任何數(shù)據(jù)存儲的庫,只要它支持數(shù)據(jù)的不可變動性。舉例說明,對于 Redux state ,Backbone 并無意義,因為 Backbone model 是可變的。

注意,即便具有不可變特性的庫支持 cursor,也不應在 Redux 的應用中使用。整個 state tree 應被視為只讀,并需通過 Redux 來更新 state 和訂閱更新。因此,通過 cursor 來改寫,對 Redux 來說沒有意義。而如果只是想用 cursor 把 state tree 從 UI tree 解耦并逐步細化 cursor,應使用 selector 來替代。 Selector 是可組合的 getter 函數(shù)組。具體可參考 reselect,這是一個優(yōu)秀、簡潔的可組合 selector 的實現(xiàn)。

Baobab

Baobab 是另一個流行的庫,實現(xiàn)了數(shù)據(jù)不可變特性 API 用以更新純 JavaScript 對象。你當然可以在 Redux 中使用它,但兩者一起使用并沒有什么優(yōu)勢。

Baobab 所提供的大部分功能都與使用 cursors 更新數(shù)據(jù)相關,而 Redux 更新數(shù)據(jù)的唯一方法是分發(fā)一個 action ??梢?,兩者用不同方法,解決的卻是同樣的問題,相互并無增益。

不同于 Immutable ,Baobab 在引擎下還不能現(xiàn)實任何特別有效的數(shù)據(jù)結(jié)構(gòu),同時使用 Baobab 和 Redux 并無裨益。這種情形下,使用普通對象會更簡便。

Rx

Reactive Extensions (和它們正在進行的 現(xiàn)代化重寫) 是管理復雜異步應用非常優(yōu)秀的方案。以外,還有致力于構(gòu)建人機交互并將其視作相互依賴的可觀測變量的庫。

同時使用它和 Redux 有意義么? 當然! 它們配合得很好。將 Redux store 視作可觀察變量非常簡便,例如:

function toObservable(store) {
  return {
    subscribe({ onNext }) {
      let dispose = store.subscribe(() => onNext(store.getState()));
      onNext(store.getState());
      return { dispose };
    }
  }
}

使用類似方法,你可以組合不同的異步流,將其轉(zhuǎn)化為 action ,再提交到 store.dispatch() 。

問題在于: 在已經(jīng)使用了 Rx 的情況下,你真的需要 Redux 嗎? 不一定。通過 Rx 重新實現(xiàn) Redux 并不難。有人說僅需使用一兩句的 .scan() 方法即可。這種做法說不定不錯!

如果你仍有疑慮,可以去查看 Redux 的源代碼 (并不多) 以及生態(tài)系統(tǒng) (例如開發(fā)者工具)。如果你無意于此,仍堅持使用交互數(shù)據(jù)流,可以去探索一下 Cycle 這樣的庫,或把它合并到 Redux 中。記得告訴我們它運作得如何!

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號