RxJS/Cycle.js 與 React/Vue 相比更適用於什麼樣的應用場景?

RxJS/Cycle.js 與 React/Vue 相比更適用於什麼樣的應用場景?

RxJS/Cycle.js 與 React/Vue 相比更適用於什麼樣的應用場景? - 知乎 https://www.zhihu.com/question/40195289前端

 

實際項目中,React, Vue 等就很方便了。而使用 Rxjs, Cycle.js 會引入大量的函數式概念,沒法輕鬆融入現有項目。
對於全新前端項目來講,要徹底投入 Cycle.js 的懷抱也總有大炮打蚊子的感受,畢竟前端項目充滿了各類狀態,變量,反作用。快速迭代時,爲了臨時業務須要,也會容忍一些反模式的代碼出現。
那麼對於前端項目來講,Rxjs,Cycle.js 更適用於何種場景呢?vue

某前輩同事的原話:
這個 app 還沒複雜到須要讓我忍受
action$.startWith( 0 ).scan( ( x, y ) => x + y ) 

這樣代碼的程度。react

[其實我的感受這樣的代碼含蠻帶感的哎( 是我 2 young, 2 simple 麼),畢竟看起來高大上,會讓那些只會jq的童鞋徹底搞不懂 ^_^ (神馬心態) ]
 
 
 
尤雨溪 前端開發、JavaScript、前端工程師 話題的優秀回答者 100 人贊同了該回答 先說觀點,React/Vue 和 Cycle 一塊兒用是不太合理的,由於 Cycle 自己定位是框架,定義了整個應用的代碼組織方式和開發範式,那就是不管是用戶事件處理仍是服務端數據同步,通通用 Rx 來作,Cycle 本身也提供了偏好的 view layer(基於 virtual-dom 的 DOM driver)。總的來講 Cycle 的範式侵入性很強,屬於要麼不用要用就得全盤接受 Rx for everything 的理念。我自己對於這個理念持保留態度,同時目前尚未看到過大型 Cycle 應用的例子,那麼天然對於 Cycle 到底好很差用,也是持保留態度。  另外一方面,在 React/Vue 應用中部分使用 Rx 是徹底沒有問題的。思路上來講就是把 React/Vue 組件的 local state 當作一個『中介』,在一個 Rx Observable 的 subscribe 回調裏面更新組件狀態。經過簡單的綁定庫支持,能夠徹底把 component state 做爲一個實現細節封裝掉,實現 Observable -> view 的聲明式綁定。參考:  - Vue + Rx: https://github.com/vuejs/vue-rx/ - React + Rx: GitHub - belfz/fully-reactive-react-example  我我的傾向於在適合 Rx 的地方用 Rx,可是不強求 Rx for everything。比較合適的例子就是好比多個服務端實時消息流,經過 Rx 進行高階處理,最後到 view 層就是很清晰的一個 Observable,可是 view 層自己處理用戶事件依然能夠沿用現有的範式。  ---  題外話,  @沈嶸  的答案拿 Vue 說事,而後說不可避免會遇到『性能牆』問題,而 Virtual DOM 是 React 對『性能牆』的解決方案,我只能說這個見解基本屬於對 Virtual DOM 理解停留在宣傳層面的水平。詳見 網上都說操做真實 DOM 慢,但測試結果卻比 React 更快,爲何? - 尤雨溪的回答。  而關於『複雜度牆』,則要麼是對『單向數據流』的理解停留在宣傳層面,要麼是對 Vue 的瞭解有限(不瞭解您能夠少說兩句)。React 若是沒有 Flux,其實也是依賴 component local state。React + Redux 作的事情說到底就是把應用狀態從組件自己隔離出去統一管理,這種思路並非只有 React 能作到,只要有個聲明式的視圖層就好了。這也是爲何 Redux 是 view-layer agnostic,Vue,Angular 2 都有配合 Redux 使用的例子,Vue 本身也有專屬的狀態管理方案 Vuex。(這些話我其實在知乎重複過好幾遍了,只是太多人被 FB 的宣傳洗了腦,說 React 必提 virtual dom 性能好 + 單向數據流應對複雜度,對其本質殊不知其因此然...) 編輯於 2016-11-07 100 11 條評論 分享 收藏收起  魯小夫 前端開發、JavaScript 話題的優秀回答者 還好吧,我以爲 event stream 比 imperative style 可讀多了 發佈於 2016-02-07 0 添加評論 分享 收藏  米嘉 怪獸工程師 15 人贊同了該回答 RxJS/Cycle.js解決的是數據流的問題,爲何有數據流的問題,是由於更傾向於或者受限於使用單向數據綁定,核心其實解決的是State管理的問題。偏向於Redux或者Flux架構會有全局State的困擾,而最近Redux做者也在新的文章中寫到「Local State is Fine」, https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.m8dop3xqq 咱們廠(小廠)在iOS(Native)、Android(ReactNative)和Web上都選擇了Data Flow驅動的設定思路,使用RxJS(RxSwift)來做爲Data Flow驅動的核心組件,架構基本相似,把全局狀態和組件局部狀態分開,結構很清楚,由於Data Flow會讓你比較容易追蹤到數據變化的緣由,最終致使UI變化的緣由。其實只要把全局狀態和局部狀態有效管理,使用Redux也很好,不過使用RxJS是由於咱們能夠很輕鬆的把全局狀態Stream和組件局部狀態的Stream經過Rx運算子共同運算,代碼會更加清晰,同時大大減小對全局狀態的污染,有效控制數據狀態變化傳播的範圍。 Reactive programming is oriented around data flows and the propagation of change. Erik Meijer gave us Rx because he was induced by push-based systems. When you want to stay up to date about the state of the world, it is much better to push instead of to pull. Observable Stream + FRP圍繞數據流驅動設計App架構,會大大減小UI上的複雜度,很是看好的結構方向。  而React自己定義了數據流向的要求,可是沒有定義如何解決這個問題,因此,React和RxJS解決的不是一個問題…… They have not solved the problem of how to achieve explicit data-flow graphs https://medium.com/@fkrautwald/plug-and-play-all-your-observable-streams-with-cycle-js-e543fc287872#.zcbj1db3x 發佈於 2016-09-28 15 添加評論 分享 收藏  Wang Namelos 宇宙級React開發 2 人贊同了該回答 我只能說Cycle是大炮,可是打蚊子一點不麻煩。就說打包比React小,自己Observable就是stage-1提案,有一天標準發佈Cycle體積幾乎就只有Virtual DOM了。 部分引入Rx只會得到部分收益,總要從Observable這個monad容器出來進去,致使編碼自己大量冗餘,丟掉大部分FP的好處。 用用Cycle你就能發現比React大量的手動綁定簡潔多了,這樣重構也方便。Cycle效率真心遠超React Redux,這取決於React onClick綁定,致使要作到相似Reactive Programming的效果(Flux / Redux 對React來講是標配),須要作大量重複工做,Flux只是模式,致使不能真的抽象成庫。這是React爲數很少的硬傷。 缺點就是Rx4測試困難,若是大家不要求覆蓋率,調試Rx其實並非很麻煩的事情。 發佈於 2016-03-14 2 添加評論 分享 收藏  沈嶸 產品總監 22 人贊同了該回答 Vue 的年齡輕,可是 Vue 倒是最傳統的基於 observer 的MVC,可是作到了儘可能簡單。可是不可避免的,當你的 Web App 愈來愈複雜,天然也會撞到兩堵牆,"性能牆"和"複雜度牆"(不然也就不會有React, Cycle.js..., Angular早就一統江湖了)。  React 針對"性能牆"的方案就是 VirtualDOM,對於"複雜度牆"的方案就是單向數據流,但願用一些"函數式"的概念來規避過於複雜的狀態維護(對於稍微複雜一些的應用,這是必定會出現的問題)。可是因爲 React 自身不是"函數式"的,又有大量的工程妥協,所以真的是充滿了 boilerplate。  Cycle.js 實際上是 FRP 在 Web App 領域的一種"模式"(Source/Driver, MVI),是天生用來對付"複雜度牆"的。並且,得益於 React 的思路, Cycle.js 也老大不客氣地把 VirtualDOM 拿來緩解"性能牆"問題。  可是,因爲 Cycle.js 尚沒有被大量的開發者使用,缺乏工程驗證,尤爲是性能評估方面;並且也沒有大廠持續地投資,因此仍是在探索階段。不過以我我的體驗來看,Cycle.js 是一種「對」的開發方式。  看 Doc 和 Tutorial 真是很精彩,做者是反應式編程的鐵桿粉絲,本身也造了諸如 xstream 這樣的輪子,HCI 的理念很不錯,可是能用好它的開發者應該很少,強制全盤在 Reactive 的閉環內進行編程,沒有很是優秀的 FRP 基礎很難在狀態規模變得十分龐大的狀況下理清各個事件流之間的關係。它能夠加深你對 FRP 的理解,但我不認爲它適用於去作真正的項目,你的團隊就沒有這個能力去全盤使用它。

先說觀點,React/Vue 和 Cycle 一塊兒用是不太合理的,由於 Cycle 自己定位是框架,定義了整個應用的代碼組織方式和開發範式,那就是不管是用戶事件處理仍是服務端數據同步,通通用 Rx 來作,Cycle 本身也提供了偏好的 view layer(基於 virtual-dom 的 DOM driver)。總的來講 Cycle 的範式侵入性很強,屬於要麼不用要用就得全盤接受 Rx for everything 的理念。我自己對於這個理念持保留態度,同時目前尚未看到過大型 Cycle 應用的例子,那麼天然對於 Cycle 到底好很差用,也是持保留態度。git

另外一方面,在 React/Vue 應用中部分使用 Rx 是徹底沒有問題的。思路上來講就是把 React/Vue 組件的 local state 當作一個『中介』,在一個 Rx Observable 的 subscribe 回調裏面更新組件狀態。經過簡單的綁定庫支持,能夠徹底把 component state 做爲一個實現細節封裝掉,實現 Observable -> view 的聲明式綁定。參考:github

- Vue + Rx: github.com/vuejs/vue-rx
- React + Rx: GitHub - belfz/fully-reactive-react-exampleweb

我我的傾向於在適合 Rx 的地方用 Rx,可是不強求 Rx for everything。比較合適的例子就是好比多個服務端實時消息流,經過 Rx 進行高階處理,最後到 view 層就是很清晰的一個 Observable,可是 view 層自己處理用戶事件依然能夠沿用現有的範式。編程

---redux

題外話, 前端工程師

的答案拿 Vue 說事,而後說不可避免會遇到『性能牆』問題,而 Virtual DOM 是 React 對『性能牆』的解決方案,我只能說這個見解基本屬於對 Virtual DOM 理解停留在宣傳層面的水平。詳見 網上都說操做真實 DOM 慢,但測試結果卻比 React 更快,爲何? - 尤雨溪的回答

 

而關於『複雜度牆』,則要麼是對『單向數據流』的理解停留在宣傳層面,要麼是對 Vue 的瞭解有限(不瞭解您能夠少說兩句)。React 若是沒有 Flux,其實也是依賴 component local state。React + Redux 作的事情說到底就是把應用狀態從組件自己隔離出去統一管理,這種思路 並非只有 React 能作到,只要有個聲明式的視圖層就好了。這也是爲何 Redux 是 view-layer agnostic,Vue,Angular 2 都有配合 Redux 使用的例子,Vue 本身也有專屬的狀態管理方案 Vuex。(這些話我其實在知乎重複過好幾遍了,只是太多人被 FB 的宣傳洗了腦,說 React 必提 virtual dom 性能好 + 單向數據流應對複雜度,對其本質殊不知其因此然...)
還好吧,我以爲 event stream 比 imperative style 可讀多了
RxJS/Cycle.js解決的是數據流的問題,爲何有數據流的問題,是由於更傾向於或者受限於使用單向數據綁定,核心其實解決的是State管理的問題。偏向於Redux或者Flux架構會有全局State的困擾,而最近Redux做者也在新的文章中寫到「Local State is Fine」, medium.com/@dan_abramov
咱們廠(小廠)在iOS(Native)、Android(ReactNative)和Web上都選擇了Data Flow驅動的設定思路,使用RxJS(RxSwift)來做爲Data Flow驅動的核心組件,架構基本相似,把全局狀態和組件局部狀態分開,結構很清楚,由於Data Flow會讓你比較容易追蹤到數據變化的緣由,最終致使UI變化的緣由。其實只要把全局狀態和局部狀態有效管理,使用Redux也很好,不過使用RxJS是由於咱們能夠很輕鬆的把全局狀態Stream和組件局部狀態的Stream經過Rx運算子共同運算,代碼會更加清晰,同時大大減小對全局狀態的污染,有效控制數據狀態變化傳播的範圍。
Reactive programming is oriented around data flows and the propagation of change. Erik Meijer gave us Rx because he was induced by push-based systems. When you want to stay up to date about the state of the world, it is much better to push instead of to pull.

Observable Stream + FRP圍繞數據流驅動設計App架構,會大大減小UI上的複雜度,很是看好的結構方向。架構

而React自己定義了數據流向的要求,可是沒有定義如何解決這個問題,因此,React和RxJS解決的不是一個問題……
They have not solved the problem of how to achieve explicit data-flow graphs
medium.com/@fkrautwald/
我只能說Cycle是大炮,可是打蚊子一點不麻煩。就說打包比React小,自己Observable就是stage-1提案,有一天標準發佈Cycle體積幾乎就只有Virtual DOM了。
部分引入Rx只會得到部分收益,總要從Observable這個monad容器出來進去,致使編碼自己大量冗餘,丟掉大部分FP的好處。
用用Cycle你就能發現比React大量的手動綁定簡潔多了,這樣重構也方便。Cycle效率真心遠超React Redux,這取決於React onClick綁定,致使要作到相似Reactive Programming的效果(Flux / Redux 對React來講是標配),須要作大量重複工做,Flux只是模式,致使不能真的抽象成庫。這是React爲數很少的硬傷。
缺點就是Rx4測試困難,若是大家不要求覆蓋率,調試Rx其實並非很麻煩的事情。

Vue 的年齡輕,可是 Vue 倒是最傳統的基於 observer 的MVC,可是作到了儘可能簡單。可是不可避免的,當你的 Web App 愈來愈複雜,天然也會撞到兩堵牆,"性能牆"和"複雜度牆"(不然也就不會有React, Cycle.js..., Angular早就一統江湖了)。

React 針對"性能牆"的方案就是 VirtualDOM,對於"複雜度牆"的方案就是單向數據流,但願用一些"函數式"的概念來規避過於複雜的狀態維護(對於稍微複雜一些的應用,這是必定會出現的問題)。可是因爲 React 自身不是"函數式"的,又有大量的工程妥協,所以真的是充滿了 boilerplate。

Cycle.js 實際上是 FRP 在 Web App 領域的一種"模式"(Source/Driver, MVI),是天生用來對付"複雜度牆"的。並且,得益於 React 的思路, Cycle.js 也老大不客氣地把 VirtualDOM 拿來緩解"性能牆"問題。

可是,因爲 Cycle.js 尚沒有被大量的開發者使用,缺乏工程驗證,尤爲是性能評估方面;並且也沒有大廠持續地投資,因此仍是在探索階段。不過以我我的體驗來看,Cycle.js 是一種「對」的開發方式。
看 Doc 和 Tutorial 真是很精彩,做者是反應式編程的鐵桿粉絲,本身也造了諸如 xstream 這樣的輪子,HCI 的理念很不錯,可是能用好它的開發者應該很少,強制全盤在 Reactive 的閉環內進行編程,沒有很是優秀的 FRP 基礎很難在狀態規模變得十分龐大的狀況下理清各個事件流之間的關係。它能夠加深你對 FRP 的理解,但我不認爲它適用於去作真正的項目,你的團隊就沒有這個能力去全盤使用它。
惋惜不少人只會跟風大牛 reactive的確可使代碼清晰些 但願你們多看看
相關文章
相關標籤/搜索