RxJS/Cycle.js 與 React/Vue 相比更適用于什么樣的應(yīng)用場景？

RxJS/Cycle.js 與 React/Vue 相比更適用于什么樣的應(yīng)用場景？ - 知乎 https://www.zhihu.com/question/40195289

?

實(shí)際項(xiàng)目中，React, Vue 等就很方便了。而使用 Rxjs, Cycle.js 會(huì)引入大量的函數(shù)式概念，無法輕松融入現(xiàn)有項(xiàng)目。
對(duì)于全新前端項(xiàng)目來說，要完全投入 Cycle.js 的懷抱也總有大炮打蚊子的感覺，畢竟前端項(xiàng)目充滿了各種狀態(tài)，變量，副作用。快速迭代時(shí)，為了臨時(shí)業(yè)務(wù)需要，也會(huì)容忍一些反模式的代碼出現(xiàn)。
那么對(duì)于前端項(xiàng)目來說，Rxjs，Cycle.js 更適用于何種場景呢？

某前輩同事的原話：
這個(gè) app 還沒復(fù)雜到需要讓我忍受
action$.startWith( 0 ).scan( ( x, y ) => x + y )

這樣代碼的程度。

［其實(shí)個(gè)人感覺這樣的代碼含蠻帶感的哎（ 是我 2 young, 2 simple 么），畢竟看起來高大上，會(huì)讓那些只會(huì)jq的童鞋完全搞不懂 ^_^ （神馬心態(tài)） ］ 尤雨溪 前端開發(fā)、JavaScript、前端工程師 話題的優(yōu)秀回答者 100 人贊同了該回答 先說觀點(diǎn)，React/Vue 和 Cycle 一起用是不太合理的，因?yàn)?Cycle 本身定位是框架，定義了整個(gè)應(yīng)用的代碼組織方式和開發(fā)范式，那就是無論是用戶事件處理還是服務(wù)端數(shù)據(jù)同步，統(tǒng)統(tǒng)用 Rx 來做，Cycle 自己也提供了偏好的 view layer（基于 virtual-dom 的 DOM driver）。總的來說 Cycle 的范式侵入性很強(qiáng)，屬于要么不用要用就得全盤接受 Rx for everything 的理念。我本身對(duì)于這個(gè)理念持保留態(tài)度，同時(shí)目前還沒有看到過大型 Cycle 應(yīng)用的例子，那么自然對(duì)于 Cycle 到底好不好用，也是持保留態(tài)度。 ?另一方面，在 React/Vue 應(yīng)用中部分使用 Rx 是完全沒有問題的。思路上來說就是把 React/Vue 組件的 local state 當(dāng)做一個(gè)『中介』，在一個(gè) Rx Observable 的 subscribe 回調(diào)里面更新組件狀態(tài)。通過簡單的綁定庫支持，可以完全把 component state 作為一個(gè)實(shí)現(xiàn)細(xì)節(jié)封裝掉，實(shí)現(xiàn) Observable -> view 的聲明式綁定。參考： ?- Vue + Rx: https://github.com/vuejs/vue-rx/ - React + Rx: GitHub - belfz/fully-reactive-react-example ?我個(gè)人傾向于在適合 Rx 的地方用 Rx，但是不強(qiáng)求 Rx for everything。比較合適的例子就是比如多個(gè)服務(wù)端實(shí)時(shí)消息流，通過 Rx 進(jìn)行高階處理，最后到 view 層就是很清晰的一個(gè) Observable，但是 view 層本身處理用戶事件依然可以沿用現(xiàn)有的范式。 ?--- ?題外話， ?@沈嶸 ?的答案拿 Vue 說事，然后說不可避免會(huì)遇到『性能墻』問題，而 Virtual DOM 是 React 對(duì)『性能墻』的解決方案，我只能說這個(gè)看法基本屬于對(duì) Virtual DOM 理解停留在宣傳層面的水平。詳見 網(wǎng)上都說操作真實(shí) DOM 慢，但測(cè)試結(jié)果卻比 React 更快，為什么？ - 尤雨溪的回答。 ?而關(guān)于『復(fù)雜度墻』，則要么是對(duì)『單向數(shù)據(jù)流』的理解停留在宣傳層面，要么是對(duì) Vue 的了解有限（不了解您可以少說兩句）。React 如果沒有 Flux，其實(shí)也是依賴 component local state。React + Redux 做的事情說到底就是把應(yīng)用狀態(tài)從組件本身隔離出去統(tǒng)一管理，這種思路并不是只有 React 能做到，只要有個(gè)聲明式的視圖層就行了。這也是為什么 Redux 是 view-layer agnostic，Vue，Angular 2 都有配合 Redux 使用的例子，Vue 自己也有專屬的狀態(tài)管理方案 Vuex。（這些話我其實(shí)在知乎重復(fù)過好幾遍了，只是太多人被 FB 的宣傳洗了腦，說 React 必提 virtual dom 性能好 + 單向數(shù)據(jù)流應(yīng)對(duì)復(fù)雜度，對(duì)其本質(zhì)卻不知其所以然...） 編輯于 2016-11-07 100 11 條評(píng)論 分享 收藏收起 ?魯小夫 前端開發(fā)、JavaScript 話題的優(yōu)秀回答者 還好吧，我覺得 event stream 比 imperative style 可讀多了 發(fā)布于 2016-02-07 0 添加評(píng)論 分享 收藏 ?米嘉 怪獸工程師 15 人贊同了該回答 RxJS/Cycle.js解決的是數(shù)據(jù)流的問題，為什么有數(shù)據(jù)流的問題，是因?yàn)楦鼉A向于或者受限于使用單向數(shù)據(jù)綁定，核心其實(shí)解決的是State管理的問題。偏向于Redux或者Flux架構(gòu)會(huì)有全局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驅(qū)動(dòng)的設(shè)定思路，使用RxJS（RxSwift）來作為Data Flow驅(qū)動(dòng)的核心組件，架構(gòu)基本類似，把全局狀態(tài)和組件局部狀態(tài)分開，結(jié)構(gòu)很清楚，因?yàn)镈ata Flow會(huì)讓你比較容易追蹤到數(shù)據(jù)變化的原因，最終導(dǎo)致UI變化的原因。其實(shí)只要把全局狀態(tài)和局部狀態(tài)有效管理，使用Redux也很好，不過使用RxJS是因?yàn)槲覀兛梢院茌p松的把全局狀態(tài)Stream和組件局部狀態(tài)的Stream通過Rx運(yùn)算子共同運(yùn)算，代碼會(huì)更加清晰，同時(shí)大大減少對(duì)全局狀態(tài)的污染，有效控制數(shù)據(jù)狀態(tài)變化傳播的范圍。 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圍繞數(shù)據(jù)流驅(qū)動(dòng)設(shè)計(jì)App架構(gòu)，會(huì)大大減少UI上的復(fù)雜度，非常看好的結(jié)構(gòu)方向。 ?而React本身定義了數(shù)據(jù)流向的要求，但是沒有定義如何解決這個(gè)問題，所以，React和RxJS解決的不是一個(gè)問題…… 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 發(fā)布于 2016-09-28 15 添加評(píng)論 分享 收藏 ?Wang Namelos 宇宙級(jí)React開發(fā) 2 人贊同了該回答 我只能說Cycle是大炮，但是打蚊子一點(diǎn)不麻煩。就說打包比React小，本身Observable就是stage-1提案，有一天標(biāo)準(zhǔn)發(fā)布Cycle體積幾乎就只有Virtual DOM了。 部分引入Rx只會(huì)獲得部分收益，總要從Observable這個(gè)monad容器出來進(jìn)去，導(dǎo)致編碼本身大量冗余，丟掉大部分FP的好處。 用用Cycle你就能發(fā)現(xiàn)比React大量的手動(dòng)綁定簡潔多了，這樣重構(gòu)也方便。Cycle效率真心遠(yuǎn)超React Redux，這取決于React onClick綁定，導(dǎo)致要做到類似Reactive Programming的效果（Flux / Redux 對(duì)React來說是標(biāo)配），需要做大量重復(fù)工作，Flux只是模式，導(dǎo)致不能真的抽象成庫。這是React為數(shù)不多的硬傷。 缺點(diǎn)就是Rx4測(cè)試?yán)щy，如果你們不要求覆蓋率，調(diào)試Rx其實(shí)并不是很麻煩的事情。 發(fā)布于 2016-03-14 2 添加評(píng)論 分享 收藏 ?沈嶸 產(chǎn)品總監(jiān) 22 人贊同了該回答 Vue 的年齡輕，但是 Vue 卻是最傳統(tǒng)的基于 observer 的MVC，但是做到了盡量簡單。但是不可避免的，當(dāng)你的 Web App 越來越復(fù)雜，自然也會(huì)撞到兩堵墻，"性能墻"和"復(fù)雜度墻"（否則也就不會(huì)有React, Cycle.js..., Angular早就一統(tǒng)江湖了）。 ?React 針對(duì)"性能墻"的方案就是 VirtualDOM，對(duì)于"復(fù)雜度墻"的方案就是單向數(shù)據(jù)流，希望用一些"函數(shù)式"的概念來規(guī)避過于復(fù)雜的狀態(tài)維護(hù)（對(duì)于稍微復(fù)雜一些的應(yīng)用，這是一定會(huì)出現(xiàn)的問題）。但是由于 React 自身不是"函數(shù)式"的，又有大量的工程妥協(xié)，因此真的是充滿了 boilerplate。 ?Cycle.js 其實(shí)是 FRP 在 Web App 領(lǐng)域的一種"模式"（Source/Driver, MVI），是天生用來對(duì)付"復(fù)雜度墻"的。而且，得益于 React 的思路, Cycle.js 也老大不客氣地把 VirtualDOM 拿來緩解"性能墻"問題。 ?但是，由于 Cycle.js 尚沒有被大量的開發(fā)者使用，缺少工程驗(yàn)證，尤其是性能評(píng)估方面；而且也沒有大廠持續(xù)地投資，所以還是在探索階段。不過以我個(gè)人體驗(yàn)來看，Cycle.js 是一種“對(duì)”的開發(fā)方式。 ?看 Doc 和 Tutorial 真是很精彩，作者是反應(yīng)式編程的鐵桿粉絲，自己也造了諸如 xstream 這樣的輪子，HCI 的理念很不錯(cuò)，但是能用好它的開發(fā)者應(yīng)該不多，強(qiáng)制全盤在 Reactive 的閉環(huán)內(nèi)進(jìn)行編程，沒有非常優(yōu)秀的 FRP 基礎(chǔ)很難在狀態(tài)規(guī)模變得十分龐大的情況下理清各個(gè)事件流之間的關(guān)系。它可以加深你對(duì) FRP 的理解，但我不認(rèn)為它適用于去做真正的項(xiàng)目，你的團(tuán)隊(duì)就沒有這個(gè)能力去全盤使用它。 尤雨溪 前端開發(fā)、JavaScript、前端工程師?話題的優(yōu)秀回答者 100 人贊同了該回答

先說觀點(diǎn)，React/Vue 和 Cycle 一起用是不太合理的，因?yàn)?Cycle 本身定位是框架，定義了整個(gè)應(yīng)用的代碼組織方式和開發(fā)范式，那就是無論是用戶事件處理還是服務(wù)端數(shù)據(jù)同步，統(tǒng)統(tǒng)用 Rx 來做，Cycle 自己也提供了偏好的 view layer（基于 virtual-dom 的 DOM driver）。總的來說 Cycle 的范式侵入性很強(qiáng)，屬于要么不用要用就得全盤接受 Rx for everything 的理念。我本身對(duì)于這個(gè)理念持保留態(tài)度，同時(shí)目前還沒有看到過大型 Cycle 應(yīng)用的例子，那么自然對(duì)于 Cycle 到底好不好用，也是持保留態(tài)度。

另一方面，在 React/Vue 應(yīng)用中部分使用 Rx 是完全沒有問題的。思路上來說就是把 React/Vue 組件的 local state 當(dāng)做一個(gè)『中介』，在一個(gè) Rx Observable 的 subscribe 回調(diào)里面更新組件狀態(tài)。通過簡單的綁定庫支持，可以完全把 component state 作為一個(gè)實(shí)現(xiàn)細(xì)節(jié)封裝掉，實(shí)現(xiàn) Observable -> view 的聲明式綁定。參考：

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

我個(gè)人傾向于在適合 Rx 的地方用 Rx，但是不強(qiáng)求 Rx for everything。比較合適的例子就是比如多個(gè)服務(wù)端實(shí)時(shí)消息流，通過 Rx 進(jìn)行高階處理，最后到 view 層就是很清晰的一個(gè) Observable，但是 view 層本身處理用戶事件依然可以沿用現(xiàn)有的范式。

---

題外話，

@沈嶸 的答案拿 Vue 說事，然后說不可避免會(huì)遇到『性能墻』問題，而 Virtual DOM 是 React 對(duì)『性能墻』的解決方案，我只能說這個(gè)看法基本屬于對(duì) Virtual DOM 理解停留在宣傳層面的水平。詳見 網(wǎng)上都說操作真實(shí) DOM 慢，但測(cè)試結(jié)果卻比 React 更快，為什么？ - 尤雨溪的回答。

?

而關(guān)于『復(fù)雜度墻』，則要么是對(duì)『單向數(shù)據(jù)流』的理解停留在宣傳層面，要么是對(duì) Vue 的了解有限（不了解您可以少說兩句）。React 如果沒有 Flux，其實(shí)也是依賴 component local state。React + Redux 做的事情說到底就是把應(yīng)用狀態(tài)從組件本身隔離出去統(tǒng)一管理，這種思路并不是只有 React 能做到，只要有個(gè)聲明式的視圖層就行了。這也是為什么 Redux 是 view-layer agnostic，Vue，Angular 2 都有配合 Redux 使用的例子，Vue 自己也有專屬的狀態(tài)管理方案 Vuex。（這些話我其實(shí)在知乎重復(fù)過好幾遍了，只是太多人被 FB 的宣傳洗了腦，說 React 必提 virtual dom 性能好 + 單向數(shù)據(jù)流應(yīng)對(duì)復(fù)雜度，對(duì)其本質(zhì)卻不知其所以然...） 編輯于?2016-11-07 10011 條評(píng)論 分享 收藏收起 魯小夫 前端開發(fā)、JavaScript?話題的優(yōu)秀回答者 還好吧，我覺得 event stream 比 imperative style 可讀多了 發(fā)布于 2016-02-07 0添加評(píng)論 分享 收藏 米嘉 怪獸工程師 15 人贊同了該回答 RxJS/Cycle.js解決的是數(shù)據(jù)流的問題，為什么有數(shù)據(jù)流的問題，是因?yàn)楦鼉A向于或者受限于使用單向數(shù)據(jù)綁定，核心其實(shí)解決的是State管理的問題。偏向于Redux或者Flux架構(gòu)會(huì)有全局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驅(qū)動(dòng)的設(shè)定思路，使用RxJS（RxSwift）來作為Data Flow驅(qū)動(dòng)的核心組件，架構(gòu)基本類似，把全局狀態(tài)和組件局部狀態(tài)分開，結(jié)構(gòu)很清楚，因?yàn)镈ata Flow會(huì)讓你比較容易追蹤到數(shù)據(jù)變化的原因，最終導(dǎo)致UI變化的原因。其實(shí)只要把全局狀態(tài)和局部狀態(tài)有效管理，使用Redux也很好，不過使用RxJS是因?yàn)槲覀兛梢院茌p松的把全局狀態(tài)Stream和組件局部狀態(tài)的Stream通過Rx運(yùn)算子共同運(yùn)算，代碼會(huì)更加清晰，同時(shí)大大減少對(duì)全局狀態(tài)的污染，有效控制數(shù)據(jù)狀態(tài)變化傳播的范圍。
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圍繞數(shù)據(jù)流驅(qū)動(dòng)設(shè)計(jì)App架構(gòu)，會(huì)大大減少UI上的復(fù)雜度，非常看好的結(jié)構(gòu)方向。

而React本身定義了數(shù)據(jù)流向的要求，但是沒有定義如何解決這個(gè)問題，所以，React和RxJS解決的不是一個(gè)問題……
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 發(fā)布于 2016-09-28 15添加評(píng)論 分享 收藏 Wang Namelos 宇宙級(jí)React開發(fā) 2 人贊同了該回答 我只能說Cycle是大炮，但是打蚊子一點(diǎn)不麻煩。就說打包比React小，本身Observable就是stage-1提案，有一天標(biāo)準(zhǔn)發(fā)布Cycle體積幾乎就只有Virtual DOM了。
部分引入Rx只會(huì)獲得部分收益，總要從Observable這個(gè)monad容器出來進(jìn)去，導(dǎo)致編碼本身大量冗余，丟掉大部分FP的好處。
用用Cycle你就能發(fā)現(xiàn)比React大量的手動(dòng)綁定簡潔多了，這樣重構(gòu)也方便。Cycle效率真心遠(yuǎn)超React Redux，這取決于React onClick綁定，導(dǎo)致要做到類似Reactive Programming的效果（Flux / Redux 對(duì)React來說是標(biāo)配），需要做大量重復(fù)工作，Flux只是模式，導(dǎo)致不能真的抽象成庫。這是React為數(shù)不多的硬傷。
缺點(diǎn)就是Rx4測(cè)試?yán)щy，如果你們不要求覆蓋率，調(diào)試Rx其實(shí)并不是很麻煩的事情。 發(fā)布于 2016-03-14 2添加評(píng)論 分享 收藏 沈嶸 產(chǎn)品總監(jiān) 22 人贊同了該回答

Vue 的年齡輕，但是 Vue 卻是最傳統(tǒng)的基于 observer 的MVC，但是做到了盡量簡單。但是不可避免的，當(dāng)你的 Web App 越來越復(fù)雜，自然也會(huì)撞到兩堵墻，"性能墻"和"復(fù)雜度墻"（否則也就不會(huì)有React, Cycle.js..., Angular早就一統(tǒng)江湖了）。

React 針對(duì)"性能墻"的方案就是 VirtualDOM，對(duì)于"復(fù)雜度墻"的方案就是單向數(shù)據(jù)流，希望用一些"函數(shù)式"的概念來規(guī)避過于復(fù)雜的狀態(tài)維護(hù)（對(duì)于稍微復(fù)雜一些的應(yīng)用，這是一定會(huì)出現(xiàn)的問題）。但是由于 React 自身不是"函數(shù)式"的，又有大量的工程妥協(xié)，因此真的是充滿了 boilerplate。

Cycle.js 其實(shí)是 FRP 在 Web App 領(lǐng)域的一種"模式"（Source/Driver, MVI），是天生用來對(duì)付"復(fù)雜度墻"的。而且，得益于 React 的思路, Cycle.js 也老大不客氣地把 VirtualDOM 拿來緩解"性能墻"問題。

但是，由于 Cycle.js 尚沒有被大量的開發(fā)者使用，缺少工程驗(yàn)證，尤其是性能評(píng)估方面；而且也沒有大廠持續(xù)地投資，所以還是在探索階段。不過以我個(gè)人體驗(yàn)來看，Cycle.js 是一種“對(duì)”的開發(fā)方式。 發(fā)布于 2016-02-08 2214 條評(píng)論 分享 收藏 Cyandev 大二學(xué)生，資深果粉，編程初學(xué)者 看 Doc 和 Tutorial 真是很精彩，作者是反應(yīng)式編程的鐵桿粉絲，自己也造了諸如 xstream 這樣的輪子，HCI 的理念很不錯(cuò)，但是能用好它的開發(fā)者應(yīng)該不多，強(qiáng)制全盤在 Reactive 的閉環(huán)內(nèi)進(jìn)行編程，沒有非常優(yōu)秀的 FRP 基礎(chǔ)很難在狀態(tài)規(guī)模變得十分龐大的情況下理清各個(gè)事件流之間的關(guān)系。它可以加深你對(duì) FRP 的理解，但我不認(rèn)為它適用于去做真正的項(xiàng)目，你的團(tuán)隊(duì)就沒有這個(gè)能力去全盤使用它。 發(fā)布于 2016-11-12 0添加評(píng)論 分享 收藏 凌柏超 妹子 滾床單嗎 滾 1 人贊同了該回答 可惜很多人只會(huì)跟風(fēng)大牛 reactive的確可以使代碼清晰些 希望大家多看看 發(fā)布于 2016-02-07 11 條評(píng)論 分享 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/Unknw/p/6422111.html

總結(jié)

以上是生活随笔為你收集整理的RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。