Vue和React的對比

今晚咱們來搞一搞Vue和React的對比好吧，話很少說今天咱們直接開搞可好，各位小老闆，開始吧

1. react總體是函數式的思想，把組件設計成純組件，狀態和邏輯經過參數傳入， 因此在react中，是單向數據流，推崇結合immutable來實現數據不可變。 react在setState以後會從新走渲染的流程，若是shouldComponentUpdate返回的是true，就繼續渲染， 若是返回了false，就不會從新渲染，PureComponent就是重寫了shouldComponentUpdate， 而後在裏面做了props和state的淺層對比;

而vue的思想是響應式的，也就是基因而數據可變的，經過對每個屬性創建Watcher來監聽， 當屬性變化的時候，響應式的更新對應的虛擬dom

 

2.react的性能優化須要手動去作，而vue的性能優化是自動的，可是vue的響應式機制也有問題， 就是當state特別多的時候，Watcher也會不少，會致使卡頓，因此大型應用（狀態特別多的）通常用react，更加可控

　　詳解：vue組件在初始化時會經過Object.defineProperty對每個data屬性創建對應的Wather，而後在模板編譯時收集依賴。之後只要修改data的任何一個屬性，就會觸發視圖的從新渲染，並且是精確的修改對應的vdom

　　　　　react的機制是每次setState的時候，調用shouldComponentUpdate，判斷state或props改變需不須要從新render，若是返回true纔會渲染。默認的實現是返回true，PureComponent的shouldComponnentUpdate淺層對比了兩次state，考慮到性能，須要寫好shouldComponentUpdate。

 

3. react的思路是all in js，經過js來生成html， 因此設計了jsx，還有經過js來操做css，社區的styled-component、jss等

　   vue是把html，css，js組合到一塊兒，用各自的處理方式，vue有單文件組件， 能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理

　　詳解：react渲染是使用jsx，用js來操做html，列表渲染、條件判斷等都經過js來控制，而vue提供了模板的語法，支持指令、過濾器等模板功能，簡化了渲染邏輯。在react組件裏須要寫大段js才能描述清楚的邏輯，使用vue的模板能夠很簡潔緊湊的代表。

　　　　　模板和jsx各有優缺點，jsx所有使用js來寫邏輯，更加的靈活，也沒什麼學習成本，可是有些渲染邏輯表達會比較囉嗦。 模板由於是專門針對渲染設計的DSL，因此寫一些渲染邏輯時會特別的簡潔和緊湊，但學習成本高一些，而且擴展須要經過指令和過濾器的方式。

　　

 4.react是類式的寫法，api不多 而vue是聲明式的寫法，經過傳入各類options，api和參數都不少。 因此react結合typescript更容易一塊兒寫，vue稍微複雜。 vue結合vue-class-component也能夠實現類式的寫法，可是仍是須要經過decorator來添加聲明，並不純粹

　　

 5.react能夠經過高階組件（Higher Order Components--HOC）來擴展，而vue須要經過mixins來擴展 React剛開始也有mixin的寫法，經過React.createClass的api，不過如今不多用了。 Vue也不是不能實現高階組件，只是特別麻煩，由於Vue對與組件的option作了各類處理， 想實現高階組件就要知道每個option是怎麼處理的，而後正確的設置。

　　

 6.react作的事情不多，不少都交給社區去作，交給社區去作的優點是能夠產生不少優秀的方案，可是會增長技術棧的學習成本和上手難度。

　　vue不少東西都是內置的，寫起來確實方便一些，內置的優點是技術棧學習成本低、上手快，可是方案變得不可替換了。

　　

　　總結：濃縮出來就是  思性路寫擴射     這六個字的簡便記憶方法我不便給大家描述，我相信大家能悟出來，實在想知道的私信我好吧

　　參考文檔：

　　　　從2張運行流程圖看vue和react區別：https://www.jianshu.com/p/1ebe36fbdcda

今天就到這裏了，各位繼續加油！！！