React和Vue的區別

總結：

實習呆在一家算是大型公司吧，前端技術很老舊，如今公司又很geek，即便用React框架又使用Vue，使用場景也都很深度，因此想總結一下框架的對比和傳統前端技術對比又有什麼好處

React和Vue的相同點

• 使用 Virtual DOM
• 提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。
• 將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫

框架對比Jq或其餘傳統前端有什麼意義？ 傳統前端開發所面臨的痛點

問題一：複雜或頻繁的 DOM 操做是性能瓶頸

前端界面開發正變得愈來愈複雜，其本質問題基本均可以歸結於：如何未來自於服務器端或者用戶輸入的動態數據高效的反映到複雜的用戶界面上，將變化的數據實時反應到 UI 上，這時就須要對 DOM 進行操做。而複雜或頻繁的 DOM 操做一般是性能瓶頸產生的緣由（如何進行高性能的複雜 DOM 操做一般是衡量一個前端開發人員技能的重要指標）

React解決：虛擬dom

虛擬 DOM 是內存數據，性能是極高的，而對實際 DOM 進行操做的僅僅是 Diff 部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要關注某個數據的變化如何更新到一個或多個具體的 DOM 元素，而只須要關心在任意一個數據狀態下，整個界面是如何 Render 的。任何 UI 的變化都是經過總體刷新來完成的。而 React 將這種開發模式以高性能的方式帶到了前端

每作一點界面的更新，你均可以認爲刷新了整個頁面。至於如何進行局部更新以保證性能，則是 React 框架要完成的事情

問題二：炫酷複雜的頁面UI和交互邏輯形成單頁代碼量巨大且耦合嚴重

React解決：組件化

所謂組件，即封裝起來的具備獨立功能的 UI 部件。React 推薦以組件的方式去從新思考 UI 構成，將 UI 上每個功能相對獨立的模塊定義成組件，而後將小的組件經過組合或者嵌套的方式構成大的組件，最終完成總體 UI 的構建

React 認爲一個組件應該具備以下特徵：

（1）可組合（Composeable）：一個組件易於和其它組件一塊兒使用，或者嵌套在另外一個組件內部。若是一個組件內部建立了另外一個組件，那麼說父組件擁有（own）它建立的子組件，經過這個特性，一個複雜的 UI 能夠拆分紅多個簡單的 UI 組件；

（2）可重用（Reusable）：每一個組件都是具備獨立功能的，它能夠被使用在多個 UI 場景；

（3）可維護（Maintainable）：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護；

（4）可測試（Testable）：由於每一個組件都是獨立的，那麼對於各個組件分別測試顯然要比對於整個 UI 進行測試容易的多。

React與vue區別一：Dom-UI更新

React

在react中若是某個組件的狀態發生改變，react會把此組件以及此組件的全部後代組件從新渲染，不太重新渲染並不表明會所有丟棄上一次的渲染結果，react中間仍是會經過diff去比較兩次的虛擬dom最後patch到真實的dom上

如要避免沒必要要的子組件的重渲染，你須要在全部可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法(只是淺比較，假設比較的類型是object，若是object僅屬性發生變化，可是其引用沒發生變化那麼shouldComponentUpdate會認爲二者之間沒有任何變化)。同時你可能會須要使用不可變的數據結構（immutable，每次產生新的object，只比較hash）來使得你的組件更容易被優化。

react+mobx也能夠實現依賴收集，mobx也是一種observable的實現

Vue

Vue視圖更新原理：依賴收集（組件的依賴是在渲染過程當中自動追蹤的，因此係統能精確知曉哪一個組件確實須要被重渲染）

總結：

引用：

https://www.infoq.cn/article/...