React這樣整個全家桶真的好么？這麼碎片化會是以後前端框架的趨勢么？

01-11

同時接觸了react和vue，感覺react依賴太多，要想做一個項目得看的東西太多，學習曲線陡峭，還有一個就是jsx這種語法在偏離javascript本身。相比於react，vue就好很多，可以直接拿來用，開發組件的語法也更符合習慣，但是生態圈沒有react豐富。我的私心裡是希望有一款優秀的框架能替代最火熱react，難道大家都很認同react的做法么？
--------------------------------------
很高興看到大家能給出自己的看法，有提到文檔的關係，構建工具多的關係，需要自己選擇依賴的關係等等，以及一些經驗分享都很有價值。
也有很多人非要以一個老司機身份，擺出一副so easy的態度。然而本題討論的就是對一個沒有接觸過react的新手來說上手react的問題。對你們這種一秒上手的，我手動拜拜。

還有從這個問題里就看出我英語差，web基礎差的，你們真的太厲害了。我服還不行么。
----------------
轉vue了，祝vue越來越好。

題主有這樣的想法是很正常的，甚至 Facebook 內部也有很多這樣的討論——React 對於新手來說確實並不友好。無論是 JSX 語法，還是 HTML in JS 這樣的設計，都完全顛覆了原生前端開發的很多習慣。

而 Vue 則非常友好，一方面沒有特殊的語法，另一方面它沒有像 React 那種把 HTML 作為 JS 的對象，它並沒有顛覆原生前端開發的習慣。

對於很多人吐槽「React 全家桶」這種做法，其實我是不予認同的。

一方面，你使用 React 完全就可以像官網那樣，直接引入一些 JS 庫，然後就可以使用了：

Vue 也是類似，也可以通過直接引入 Vue 的庫然後直接使用。

另一方面，我們之所以要用所謂的「全家桶」，是因為確實有些問題需要一些工具來解決。比如 NPM 解決了包管理的問題；Webpack 解決了模塊化、構建等問題；Babel 解決了老瀏覽器不兼容新語法的問題等等。所以，每個工具的引入都是有其價值的。

前端開發才不過十來二十年，目前還處於分裂和百花齊放的狀態，誰也不敢說最後前端開發到底是怎麼樣的，但是我們能做到的是做出局部最優解。

雖然我不太願意接受別人批評前端界浮躁的言論，因為這有點一杆子打倒所有人的意思。然而，很多人確實是很浮躁，才把基礎學那麼一點點，就急急忙忙地隨波逐流各種學框架，才剛學會爬就急著去跑步，我並不認為這是一件好事。

講道理，vue之所以可以如此的開袋即食是因為尤大自己硬擼出了一個周邊生態、做了各種工具，幫助開發者寫vue based application，而react這塊就更多的依託於社區了。而redux之類的lib學會了的話理解vuex就容易很多啊，又不是互斥的關係。

至於學習曲線么，我還是覺得ng的曲線要比react抖。

最近剛好在研究Vue，把一些心得體會分享出來，也給題主一些借鑒。

首先，react技術棧是全家桶，這個是個很大的誤解，下面針對幾點來比較react和vue。

1、react和vue都是視圖層面(vm)的解決方案，兩者只有分別結合了redux和vuex的數據管理方案，才是真正意義上的MVVM,所以兩者在功能點上幾乎一致。

2、現在的前端開發都是往ES6/7的層面去靠攏的，在這一點上vue和react都依賴於babel解決方案。react和vue.common都是典型的為commonJS規範庫，兩者都可以和npm很好的結合。

3、react和vue在開發體驗上面，一個是JSX，一個是模板語法，只不過一個是JS來寫html代碼，一個還是基於傳統的dom層面，兩者雖然宿主不同，但在代碼編寫的程序邏輯是一致的。

4、react和vue都存在生命周期，只不過react的生命周期貫穿於開發中，而vue的生命周期是為了優化開發性能的開發者提供的，基本業務邏輯基本可以忽略這一點。

5、vue和react雖然在設計上都遵循webComponents規範，但是react可以說對此規範的實踐和抽離較之vue更加的純粹和組件化，僅僅提供數據props即可完成組件規劃，而vue的組件依賴js和HTML，在規範上弱一些。

===========第五點有待商榷。經提醒,vue在組件化的層面，其實是實現了props的概念的。答主的個人理解僅僅做為參考即可=========

作為長期使用react技術棧的前端開發，我的個人體會就是react是中台業務開發神器。

hot-loader、redux、css-modules、各類npm庫等，能輕鬆與react結合起來，開發項目的時候多人協作開發組件、一組裝起來，分分鐘上線。

其實一開始從angular開發轉到react，還確實會有些不適應。然而，當我看完facebook的文檔以及2015年的react conference之後，在garean大神的講解下，我開始對react的框架設計以及MVVM的實踐理念有所接收，開發思維也從本來的dom層面轉到v-dom層面，漸漸覺得react開發的模式將會在一定時期內引領一波前端工程化的潮流。多人合作、webComponents、v-dom輕鬆結合react-native和react、簡易的單元測試。

vue其實很適合移動端開發，而且開發速度快、上手成本很低，適合快速上馬項目。當我看到文檔中關於class處理的時候，我還是很欣喜的。因為 @尤雨溪老師是藝術家嘛，所以對樣式的處理兼容了所有的js數據格式，絕對比react做的好多了，當然如果在react中引入classnames模塊，也基本可以達到vue一樣的api 層面。

總之，贊react和vue，兩者各有優缺點。

至於未來會是什麼框架[解決方案]的天下，這個不好說。但是有幾點難實現的原則一定是會體現的。

1、能夠提供介面讓css有作用域的概念。比如css-modules

2、組件化開發，能夠實現webComponents規範

3、支持umd規範

4、能夠兼顧前端UI和業務邏輯

最重要的一點: 對開發者友好(畢竟要用的開心才會買賬)^_^

覺得react難和全家桶，真心覺得是英語太差……GitHub上面那麼多starter kit……

分割線…………………………

我說英語差並不是看不起樓主，或者任何高高在上覺得自己英語多好。本人英語也不好，但是我react是在plurasight在線視頻看著學的大概3，4小時長的課程…看完大概就入門了，接下來看看github上面例子項目，下幾個starter kit 自己試試…並不覺得學習曲線有多高…相反學angular js的時候很久都無法理解angular js的設計原理…

基本告別自行車了。

Vue和react最大的區別就是尤雨溪大大做了很多工作，寫了很多文檔幫你們理解。你們開心了，覺得react也應該這麼做，react做了不少英文學習資料，然後你們就開始說學習路線陡峭，所以只是因為英語沒學好罷了。

PS: 初學者請好好學習web基礎，不要參與到框架討論這種高逼格且收效甚微的事情上。

2017 更新：

現在 React 有 create-react-app 了，在構建層面有了一個基礎；社區基本上也合流到了 react + redux + react-router 的主流方案，當然完全社區驅動的代價就是經歷了一段漫長的混亂期。不過即使今天，對於 CSS 解決方案還是相當碎片化，css-in-js 現在有幾十個不同的方案，到底是不是出路也還不一定。

Vue 也有全家桶，但是區別在於 Vue 的全家桶是同一個大廚配的，還帶有吃法指南。而 React 的全家桶是要你自己去菜市場里挑的。

其實跨過『上手體驗』之後看『開發體驗』，兩者並沒有明顯的『優劣』，更多是『偏好』。但是你要單說『上手體驗』，我覺得 Vue 確實做的比 React 好，這也沒什麼好謙虛的。

你也可以不用人家的全家桶，沒人逼你。

之所以很多人推薦全家桶，無非是全家桶可以提高生產力。

你如果覺得全家桶不能提高你的生產力，你也可以不用。

我去年做一個項目的prototype，試用了下react，然後放棄了配套Flux——因為學習成本太高，當時完全沒必要去費功夫搞這些。（反正那些代碼都要刪的，亂就亂點了；寫好了反而有人動歪心思）

---------------

你要簡單的也有：從零開始寫MVVM框架3-完結篇 - Twiknight的文章 - 知乎專欄

一共25行，根本沒有學習曲線，哪怕你光讀代碼都能一個小時內搞懂

但是配套設施啥都沒有，你全部得自己造。

講真，誰敢把這種玩具用到項目裡面，我只能說敬你是條漢子。

---------------

我不喜歡JSX，也對Vue的模板持保留意見，我覺得Hyperscript比較對我的味，但這些方案各有取捨，用哪個完全看你想要什麼。

難道React有禁止你用Hyperscript嗎？

難道React有禁止你用Vue-template嗎？

你真看不慣的話，自己寫個插件支持下不就完事了，又不是多難的事。

開源世界有哪個輪子是天上掉下來的？

人家搞一個你看不慣的JSX你就說人家學習曲線陡峭，這樣不太好吧。

jsx這種揉一起的語法真的合適前端開發么

年輕人，你就不能動動手指頭搜索一下么？

JSX這種彆扭的東西設計出來，還有這麼多人用，難道是沒有理由的？

哪怕它真的很蠢，你也可以了解下它為什麼蠢嘛，以後你自己寫框架就可以避免一個大坑了。

就像這篇文裡面寫的一樣 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

其實大多數人的問題是：他們根本不需要用到 React 這麼重型的東西

JSX 語法比 Vue 模版語法簡單多了，你只要知道怎麼敲大括弧，就能寫 JSX。JSX 只是在很多情況下比較丑而已。嫌 JSX 噁心，可以用純 JS 創建 Virtual DOM 啊（不過那樣更噁心）。

另外，其實如果你想用類似 Vue 那樣的模版寫 React，在技術上是完全可行的，只需要實現一套 template 到 f(component) =&> VirtualDom 的 transformer 就行了。

Vue 上手比 React 容易，很主要的一個原因是大家都是從使用 jQuery 操作 DOM 過來的，用 Vue 的話，在網頁上加幾個 attribute，然後在 js 裡面 new 一下，數據就自動填上去了，很方便。而 React 居然要繼承那個莫名其妙的 Class，還要把 HTML 弄出來放在 js 裡面，太反人類了。

其實說白了就是習慣問題，大不了在編輯器裡面加個 snippet?

再說開發環境搭建，假如你整個頁面就一個 component，用 Vue 的話可以直接把模版寫 HTML 裡面，然後 new 一下就能跑了，的確比 React 方便很多。

相比之下，React 沒那麼好用。React 在生產環境引一個轉譯器的確不太靠譜，正常情況下需要 webpack 等工具才能用，然而前端的趨勢就是這樣，並不是現在太複雜，而是過去太隨意了。而且很多用 Vue 甚至 jQuery 的項目，也配了一大堆 dev dependencies. 這並不是 React 的鍋。況且現在遍地的 starter-kit 可以撿，比如 Ant-Tool（我廠出的，不過我沒用過這個）。

全家桶不是必須品。

什麼 flux redux immutable.js router 的都不是必須的，React 雖然只是管理 View 的，但是足以應付很多需求，我不知道是不是人人都在開發「大型項目」。等你真正需要的時候，自然不會認為掌握起來難了。

React 以及其全家桶的文檔，算是對開發者很友好的了。對於 React 入門者來說，需要多次翻閱的可能只有 Component Specs and Lifecycle 這一頁。當然，Vue 對中國開發者的確更友好一些。

兩者我都有一定程度的使用，不覺得 React 比 Vue 複雜（可能是和我先用 React 有關？），反倒覺得 React 的函數 =&> VDOM 的思路十分純粹，而 Vue 則有很多很方便的糖：模版語法、class 處理、數據雙向綁定、指令等等用起來很方便。

總之，各有所長。

說說個人看法，學習react主要還是因為整個生態，有facebook支持，質量相對有保障，衍生出的react-native, react-canvas等輪子在很多場景下可以直接拿來用。

碎片化是當前的狀態，比如flux庫，promise庫，utils函數庫，dom操作庫，ajax庫等等，每個點都有2-3個庫在開源社區處於競爭狀態，各有所長，大家根據自身的需要去選擇，每做出一個選擇都需要查文檔甚至看源碼，以及看一些相關的文章。這樣其實效率是很低的。既然效率低，那麼它就一定不會是趨勢。

所謂react的流行其實絕大多數都是在大廠的團隊里，大廠可以有高T脫離業務去探究和推進這些東西，而對於千千萬萬的中小公司，目前這種碎片化的react生態確實成本太高。

未來的趨勢一定是一個真正的全家桶框架，一下子全給你裝上，不需要你去對比360殺毒好還是百度殺毒好。其實看看server端web框架不就是這樣么？比如laveral、rails，其實都是集成了大量的單一功能庫的超級全家桶。react最後可能只是這個框架中的一個核心庫而已，而這個核心庫也應該是可以替換的，比如移動端項目我可以把核心庫替換為更輕量的riot，強SEO項目我可以替換為node.js在服務端渲染，後台管控類則使用react。

BTW, 我們Team目前正在研發一個這樣的框架，目前已經在項目中試用了。

React/Flux/Redux不太適合作為前端入門的第一個框架。第一個框架，我覺得Vue,Angular都比較合適。

除了React之外，同樣不太推薦用Backbone和Ember入門。因為Backbone非常generic（是優點也是缺點），而Ember又特別Opinionated（是優點也是缺點），都不太適合入門。

Vue， Angular挑一個學一段時間，再接觸React/Redux就會覺得容易理解很多了。另外我建議在學js框架之前，以下的幾個基礎得先打牢：

- JS ES5, ES6的基本句法

- 基礎的幾種HTTP code，CORS的概念

- RESTFUL的概念，以及優缺點

- HTML 的tag和每個tag里的valid attribute

- Web component的概念

- Async的概念（涉獵下主流的幾種實現方法就更好了）

前端框架在不斷變化，打好了基本功，就萬變不離其宗。

貴圈真是三個月河東三個月河西，用vue的都開始黑react了。。。

框架這種東西，覺得哪個順手哪個適合就用哪個，我還覺得Backbone+Marionette爽的飛起呢。。。

（身為小白裝這麼大的逼會不會被打，怕怕的）

react是為了大型工程而生。請思考你的網站有這麼複雜？工具要用在適合的地方才能發揮長處

此前從未覺得react比vue複雜，反而覺得react比vue清晰直接。

被題主嚇得打開電腦回去看了一下之前分別用react和vue寫的倆小項目，對比了一下依賴數。

dependencies: vue 項目為6個，react 項目為8個

devDependencies: vue 項目為33個， react 項目為32個。

依賴差不多。

再說碎片化，不太理解什麼意思，難道指的是組件化嗎？貌似說不通。說jsx不好？這不就是甜咸豆腐腦嗎？jsx也不是一無是處啊，至少看起來更直觀一點，操作起來也直接一點嘛。

看代碼的時候你可以看邏輯就知道是怎麼渲染的。vue你還得看有哪些指令如何控制視圖，綁定了哪個屬性，屬性是什麼樣的邏輯，不是那麼一目了然嘛。

寫代碼的時候，使用jsx你的邏輯可以直接控制視圖渲染，不需要通過指令去間接控制，不是比較直接好玩么？

甜咸豆腐腦，各有風味。

舉個例子,JQuery 是輕+小吧,10年過去了,同一時期的甚至近兩年流行的都死了,就只有JQuery活著

（立貼為證，vue早晚會出jsx的！）

題主你之所以有這種想法還是react抽象程度不夠高的鍋，要我說就統一介面一切html都不讓用，一個項目搭仨月環境寫一個月代碼然後就可以對外吹react一個月時間制霸全平台啦！

嚴格說來 react 的確有著這些問題，上手時至少webpack是得去了解的，否則就得引入Babel browser ，而且babel對於browser 的支持也越來越差。從這點看來，vue, riot之類的框架都更好些。

但如果因為這個原因就放棄整個生態，個人感覺不可取。

我也覺得，是樓主英語差的原因....

React哪兒來的全家桶？你直接按照官方寫法用一個script引入React庫跑步起來還是咋地

吐槽jsx（說實話看起來真的丑），React不強制jsx呀可以用純js寫組件呢

Vue是js in html吧？？React則是反過來，你覺得html靈活呢還是js靈活呢

我個人是真的不喜歡在html上加一堆用於js compile的標記。

React在github上有很多starter kit，比如yoo就非常好用，也是開袋即食啊。

我覺得React的完全組件化更適合發展一個超出前端的生態圈。

完全的組件化更具有抽象性，說不了有一天Android控制項，iOS控制項，VR SDK控制項，甚至桌面的native控制項都可以一起在React的組件系統里交互。

React造就了更多可能。

搬運自我的另一篇回答：少談些主義，多研究些問題。不要犯選擇困難症，MVVM框架都很相似，咸甜豆漿而已，在解決最核心的問題之後，各有各的小缺點及小優點而已。R、V、A三種框架學習起來無外乎下面一種通用思路：

核心問題就是：Web 組件化

1. 語法

不使用構建工具的最簡單DEMO
正常寫法
注意點

2. 組件

組件初始化
組件間通信
組件間訪問鏈
傳遞組件
生命周期
訪問原生DOM

3. 某些框架特色

JSX
VDOM
diff
各框架的響應式方案
指令
過濾器
插件
表單元素控制的區別（Model / 受控表單）
ng的一堆別的概念

4. 事件

與原生區別
使用
訪問原生事件

5. 路由

嵌套路由
含參路由
默認路由
重定向
匹配規則

6. 工程化

構建工具
語言版本
類型檢查
單元測試

7. http工具

CURD
REST

8. 數據流

狀態管理的基本思路
單向數據流與雙向綁定的區分

9. HTML

模板語法
JSX語法

10. 基礎業務

TODO
表單
事件
動畫
CSS3動畫
js動畫
HTTP事務
條件渲染
列表渲染
離線處理
等等

11. 組件化開發

原則
包裝已有生態包（如 echarts）
CSS方案選擇
設計模式
禁忌
組件測試
基礎組件類型及實現（antd、elements、MaterialDesign）

12. 服務端渲染

原理
同步狀態/狀態恢復
做法

13. 非同步流程管理

Promise
Rx.js

這幾個框架要解決的問題就是這些，方案不同而已，對比著看，沒準一下會了三個呢（逃…
另，對於新手來說先上vue，能更快地理清組件化開發的思路，避免在周邊問題上糾纏不清。（模板你肯定用過吧、指令應該接觸過吧，這些是 Vue 學習的成本。反觀 RA，JSX 不一定用過、麻煩的受控表單、ts 不一定用過、什麼 DI、Provider 啥的也是新概念，這成本就多了很多了...然而這些跟 web 組件化都沒什麼關係...屬於框架的特色，先別折騰他們）。

對於國內找工作來講 Vue、React 都比 A 家好找。國外 React、A系1、2好找。