React與Vue的相同與不一樣點

咱們知道JavaScript是世界上最流行的語言之一，React和Vue是JS最流行的兩個框架。因此要想前端的開發那麼必須掌握好這兩個框架。

那麼這兩個框架有什麼不一樣呢？

React 和 Vue 相同之處，它們都有：

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

React與Vue的不一樣之處：

一、數據綁定  

     vue是雙向綁定，

   Vue.js 最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統。所謂雙向綁定，指的是vue實例中的data與其渲染的DOM元素的內容保持一致，不管誰被改變，另外一方會相應的更新爲相同的數據。這是經過設置屬性訪問器實現的。在vue中，與數據綁定有關的有 插值表達式、指令系統、*Class和Style、事件處理器和表單空間、ajax請求和計算屬性

  react沒有數據雙向綁定
  react是單向數據流
 react中經過將state（Model層）與View層數據進行雙向綁定達數據的實時更新變化，具體來講就是在View層直接寫JS代碼Model層中的數據拿過來渲染，一旦像表單操做、觸發事件、ajax請求等觸發數據變化，則進行雙同步

二、狀態管理

react

Readux實際上是Flux的一種進階實現。它是一個應用數據框架，主要做用應用狀態的管理。

Redux三大原則：

單一數據源、狀態是隻狀態讀的、狀態修改均有純函數完成。

Redux中3個經常使用的方法

一、createStore() 建立store

二、combineReducers() 合併多個reducer

三、applayMiddleware()使用中間件，處理異步的action

   它的工做流程：

   首先先建立一個Action,經過dispatch把action發送給Store，Store把Action給了Reducer，Reducer有兩個參數（previous，action）作數據的修改，而後給了Store，Store觸發了subscribe（）這個方法調用函數執行setState使View發生改變。

如圖所示：

Vue

Vuex也是公共狀態管理，他是最好的非父組件傳值方式。

Vuex中五個屬性主要的做用裏面的方法：

有五種，分別是 State、 Getter、Mutation 、Action、 Module

 

state

    一、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象

   裏面的data

   二、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依

   賴這個數據的組件也會發生更新

  三、它經過mapState、mapGetters把全局的 state 和 getters 映射到當前組件的 computed 計算屬

  性中

 

 Getter

   一、getters 能夠對State進行計算操做，它就是Store的計算屬性

   二、 雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用

  三、 若是一個狀態只在一個組件內使用，是能夠不用getters

 

Action

用來處理異步以及一些業務邏輯，裏面的全部的函數的參數都有兩個值，參數1：一個爲對象，參數2：傳遞過來的參數

Mutation

有兩個參數：參數1：state、參數2：params也就是傳遞過來的參數   用來修改state中的數據

 

Module

實現模塊化

 

Vuex傳遞流程：

 當組件須要修改state中的數據的時候必須經過dispatch來觸發action裏面的方法，action每一個方法都會有一個commit方法，用來觸發mutation，mutation用來修改state中的數據，當mutation裏面的方法觸發數據的時候，數據就會發生改變，由於數據是響應式的，所以組件數據也會發生改變。

 

如圖所示：

三、路由

        二者的路由很類似，都是利用了組件化思想

react

在路由庫的問題上，React 選擇把問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。
react中，須要引入react-router庫，
使用時，路由器Router就是React的一個組件。
Router組件自己只是一個容器，真正的路由要經過Route組件定義。
Route組件定義了URL路徑與組件的對應關係。你能夠同時使用多個Route組件。

Vue

Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。
使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。

四、 渲染性能對比

react視圖渲染
React 的渲染創建在 Virtual DOM 上——一種在內存中描述 DOM 樹狀態的數據結構。當狀態發生變化時，React 從新渲染 Virtual DOM，比較計算以後給真實 DOM 打補丁。

Virtual DOM 提供了函數式的方法描述視圖，它不使用數據觀察機制，每次更新都會從新渲染整個應用，所以從定義上保證了視圖與數據的同步。它也開闢了 JavaScript 同構應用的可能性。

在超大量數據的首屏渲染速度上，React 有必定優點，由於 Vue 的渲染機制啓動時候要作的工做比較多，並且 React 支持服務端渲染。

元素是構成 React 應用的最小單位。元素用來描述你在屏幕上看到的內容，與瀏覽器的 DOM 元素不一樣，React 當中的元素事實上是普通的對象，React DOM 能夠確保 瀏覽器 DOM 的數據內容與 React 元素保持一致。

咱們用React 開發應用時通常只會定義一個根節點。但若是你是在一個已有的項目當中引入 React 的話，你可能會須要在不一樣的部分單獨定義 React 根節點。咱們將 元素傳入一個名爲 ReactDOM.render() 的方法來將其渲染到頁面上，頁面上就會顯示該元素。
組件渲染 
 當React遇到的元素是用戶自定義的組件，它會將JSX屬性做爲單個對象傳遞給該組件,這個對象稱之爲「props」

 

vue視圖渲染
Vue 經過創建一個虛擬 DOM 對真實 DOM 發生的變化保持追蹤。

vue渲染的過程以下：

  new Vue，執行初始化
  掛載$mount方法，經過自定義Render方法、template、el等生成Render函數
  經過Watcher監聽數據的變化
  當數據發生變化時，Render函數執行生成VNode對象
  經過patch方法，對比新舊VNode對象，經過DOM Diff算法，添加、修改、刪除真正的DOM元素

五、 數據更新

 react數據更新
React 元素都是immutable 不可變的。當元素被建立以後，你是沒法改變其內容或屬性的。一個元素就好像是動畫裏的一幀，它表明應用界面在某一時間點的樣子。
根據咱們現階段瞭解的有關 React 知識，更新界面的惟一辦法是建立一個新的元素，而後將它傳入 ReactDOM.render() 方法。

vue數據更新

經過forceUpdate能夠實現數據強制更新

六、 開發模式及規模

react

開發模式

React自己，是嚴格的view層，MVC模式

腳手架
React 提供了create-react-app，可是如今還存在一些侷限性：
它不容許在項目生成時進行任何配置，而 Vue 支持 Yeoman-like 定製。
它只提供一個構建單頁面應用的單一模板，而 Vue 提供了各類用途的模板。
它不能用用戶自建的模板構建項目，而自建模板對企業環境下預先創建協議是特別有用的。

vue

Vue是MVVM模式的一種方式實現

雖然沒有徹底遵循 MVVM 模型，Vue 的設計無疑受到了它的啓發。所以在文檔中常常會使用 vm (ViewModel 的簡稱) 這個變量名錶示 Vue 實例。

腳手架

Vue 提供了Vue-cli 腳手架，能讓你很是容易地構建項目，包含了 Webpack，Browserify，甚至 no build system。

七、HTML&&CSS

react

JSX
在 React 中，全部的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。
JSX, 一種 JavaScript 的語法擴展。 咱們推薦在 React 中使用 JSX 來描述用戶界面。JSX 乍看起來可能比較像是模版語言，但事實上它徹底是在 JavaScript 內部實現的。

JSX 用來聲明 React 當中的元素。

JSX自己也是一種表達式，在編譯以後呢，JSX 其實會被轉化爲普通的 JavaScript 對象。這也就意味着，你其實能夠在 if 或者 for 語句裏使用 JSX，將它賦值給變量，看成參數傳入，做爲返回值均可以
JSX 說是手寫的渲染函數有下面這些優點：
你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。好比你可使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 做用域中的值等等。
開發工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的 (好比，linting、類型檢查、編輯器的自動完成)。

組件做用域內的CSS
除非你把組件分佈在多個文件上 (例如 CSS Modules)，CSS 做用域在 React 中是經過 CSS-in-JS 的方案實現的 (好比 styled-components、glamorous 和 emotion)。這引入了一個新的面向組件的樣式範例，它和普通的 CSS 撰寫過程是有區別的。另外，雖然在構建時將 CSS 提取到一個單獨的樣式表是支持的，但 bundle 裏一般仍是須要一個運行時程序來讓這些樣式生效。當你可以利用 JavaScript 靈活處理樣式的同時，也須要權衡 bundle 的尺寸和運行時的開銷。

Vue

Templates模板語法
事實上 Vue 也提供了渲染函數，甚至支持 JSX。然而，咱們默認推薦的仍是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優點：
對於不少習慣了 HTML 的開發者來講，模板比起 JSX 讀寫起來更天然。這裏固然有主觀偏好的成分，但若是這種區別會致使開發效率的提高，那麼它就有客觀的價值存在。
基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更爲容易。
這也使得設計師和新人開發者更容易理解和參與到項目中。
你甚至可使用其餘模板預處理器，好比 Pug 來書寫 Vue 的模板。
Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時，Vue 可以智能地計算出從新渲染組件的最小代價並應用到 DOM 操做上。
單文件組件CSS
Vue 設置樣式的默認方法是單文件組件裏相似 style 的標籤。
單文件組件讓你能夠在同一個文件裏徹底控制 CSS，將其做爲組件代碼的一部分。
Vue 的單文件組件裏的樣式設置是很是靈活的。經過 vue-loader，你可使用任意預處理器、後處理器，甚至深度集成 CSS Modules——所有都在

小結
更抽象一點來看，咱們能夠把組件區分爲兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。咱們推薦在前者中使用模板，在後者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不一樣有所變化，但總體來講咱們發現表現類的組件遠遠多於邏輯類組件。

八、 使用場景

react

一、期待構建一個大型應用程序

二、期待同時適用於Web端和原生APP的框架

三、 期待最大的生態系統

vue

一、 期待模板搭建應用

二、期待簡單和「能用就行」的東西

三、期待應用盡量的小和快

九、服務器端渲染（SSR）

react

React的虛擬DOM是其可被用於服務端渲染的關鍵。首先每一個ReactComponent 在虛擬DOM中完成渲染，而後React經過虛擬DOM來更新瀏覽器DOM中產生變化的那一部分，虛擬DOM做爲內存中的DOM表現，爲React在Node.js這類非瀏覽器環境下的吮吸給你提供了可能，React能夠從虛擬DoM中生成一個字符串。而不是跟新真正的DOM，這使得咱們能夠在客戶端和服務端使用同一個React Component。

React 提供了兩個可用於服務端渲染組件的函數：React.renderToString 和React.render-ToStaticMarkup。 在設計用於服務端渲染的ReactComponent時須要有預見性，考慮如下方面。

選取最優的渲染函數。
如何支持組件的異步狀態。
如何將應用的初始化狀態傳遞到客戶端。
哪些生命週期函數能夠用於服務端的渲染。
如何爲應用提供同構路由支持。
單例、實例以及上下文的用法。

vue

Vue.js 是構建客戶端應用程序的框架。默認狀況下，能夠在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操做 DOM。然而，也能夠將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將靜態標記」混合」爲客戶端上徹底交互的應用程序。

服務器渲染的 Vue.js 應用程序也能夠被認爲是」同構」或」通用」，由於應用程序的大部分代碼均可以在服務器和客戶端上運行。

2. 服務器端渲染優點
- 更好的 SEO，因爲搜索引擎爬蟲抓取工具能夠直接查看徹底渲染的頁面。
- 更快的內容到達時間(time-to-content)，特別是對於緩慢的網絡狀況或運行緩慢的設備。無需等待全部的 JavaScript 都完成下載並執行，才顯示服務器渲染的標記，因此你的用戶將會更快速地看到完整渲染的頁面。一般能夠產生更好的用戶體驗，而且對於那些「內容到達時間(time-to-content)與轉化率直接相關」的應用程序而言，服務器端渲染(SSR)相當重要。

十、總結

Vue的優點包括：
- 模板和渲染函數的彈性選擇
- 簡單的語法及項目建立
- 更快的渲染速度和更小的體積

- React的優點包括： - 更適用於大型應用和更好的可測試性 - 同時適用於Web端和原生App - 更大的生態圈帶來的更多支持和工具 - 而實際上，React和Vue都是很是優秀的框架，它們之間的類似之處多過不一樣之處，而且它們大部分最棒的功能是相通的： - 利用虛擬DOM實現快速渲染 - 輕量級 - 響應式和組件化 - 服務器端渲染 - 易於集成路由工具，打包工具以及狀態管理工具 - 優秀的支持和社區