React技術實踐（1）
隨著系統越來越龐大，前端也變得越來越復雜，因此，構建一套組件化的前端變得很重要了。
之前一直在使用Asp.net來進行前端的組件化，Asp.net組件化有個很大的缺陷，就是和後臺代碼綁定太緊密了，不符合REST API模式；再後來就使用純粹的Javascript模塊化開發，雖然解決了前後端分離問題，也做到了前端邏輯的組件化，但無法做到真正的前端（包括UI）的組件化。
所以，前端組件化技術就自然成為首選方案了。
流行的前端組件化技術有React和Vue兩種，對比如下（摘錄自https://segmentfault.com/a/1190000009268926）
---------------------------
2016年，React鞏固了它JavaScript web框架之王的地位。在這一年裏，Web和原生APP的庫都迅速發展，同時與Angular相比，也具有明顯優勢。
與此同時，2016年對於Vue而言，也是很重要的一年。Vue2的發布給JavaScript社區帶來了巨大的沖擊，在Github上獲得了25000個star。
不可否認，React和Vue的範圍十分類似：它們都是輕量級的組件庫，都用於構建用戶界面，專註於視圖層。兩者都可以在簡單項目中，也可以使用工具將它們擴展為復雜的應用程序。
因此，很多web開發人員都想知道，到底應該選擇哪一個？一個明顯優於另一個？有什麽需要註意的利弊嗎？還是說，兩者基本相同？
兩個框架，兩個倡導者
在本文中，我想徹底地公正地比較兩者之前的區別。唯一的問題就是：我是Vue的愛好者，必然會有一些偏見。我經常在我的項目中使用Vue，還發布了一些在線教程，即Ultimate Vue.js Developers course
為了擺脫我偏見的影響，我找到了我的朋友Alexis Mangin，他是一名優秀的JavaScript開發者，也是React的愛好者。他沈浸在React中，經常在Web和移動APP開發中使用React。
Alexis曾經問我：“為什麽你這麽喜歡Vue，從來不用React？”。由於我不太了解React，我很難回答這個問題。所以，我決定，一起坐下來，展示我們選擇的庫，看看它們究竟能提供什麽東西。
經過激烈的討論和互相學習，我們得出了以下6個結論。
如果你喜歡使用模板（ 或需要一些其中的選項）構建應用程序，那麽請選擇Vue
將標記放在HTML文件中是Vue應用程序的默認選項。與Angular類似，大括號用於數據綁定表達式，指令（特殊的HTML屬性）用於向模板添加功能。下面是一個簡單的Vue程序例子。它可以輸出一條消息，有一個按鈕可以動態反轉消息：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue.js!
},
methods: {
reverseMessage: function () {
this.message = this.message.split(‘‘).reverse().join(‘‘);
}
}
});相比之下，React應用程序避開模板，要求開放人員在JavaScript中創建DOM，通常用JSX輔助，下面是用React來實現同樣的功能：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ‘Hello React.js!‘
};
}
reverseMessage() {
this.setState({
message: this.state.message.split(‘‘).reverse().join(‘‘)
});
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.reverseMessage()}>
Reverse Message
</button>
</div>
)
}
}
ReactDOM.render(App, document.getElementById(‘app‘));
對於學習標準的web初級開發者而言，模板更容易理解。但是也有很多經驗豐富的開發人員樂意使用模板，因為模板可以更好地分離布局和功能，同時也可以選擇向Pug這樣的預處理器。
但是，使用模板需要學習所有的HTML擴展語法，渲染函數只需要了解標準的HTML和JavaScript
如果你喜歡簡單的能正常工作的，那麽請選擇Vue
一個簡單的Vue項目可以不需要解析，直接在瀏覽器中運行，這允許Vue可以像jQuery一樣在項目中引用。
雖然在技術上使用React也是可行的，但是典型的React代碼更傾向於像classes和non-mulating 數組方法這樣的JSX和ES6的特性。但是Vue在簡潔設計方面更為深入。我們來比較兩者如何處理應用程序的數據（即“狀態”）。
在React中State是不可以直接改變的，需要調用setState接口：
this.setState({
message: this.state.message.split(‘‘).reverse().join(‘‘)
});當前和之前的狀態差異讓React知道什麽時候在DOM中重新渲染以及渲染什麽，因此不可變的狀態是非常必要的。
相比之下，數據可以在Vue中突變。相同的數據屬性在Vue中發生變化更為簡單。
// Note that data properties are available as properties of
// the Vue instance
this.message = this.message.split(‘‘).reverse().join(‘‘);在你得出Vue渲染系統比React渲染低效的結論之前，讓我們來看看Vue中的狀態管理：當你向狀態添加新對象時，Vue會遍歷它的所有屬性並且轉換為getter和setter。Vue系統會持續追蹤狀態並且在狀態發生變化時，自動重新渲染DOM。
令人印象深刻的是，Vue中的狀態改變更為簡潔的同時，重新渲染系統的效率其實比React更好。
Vue的反應系統確實有值得註意的事項。例如：它不能檢測到屬性的添加、刪除以及特定數組的變化。在這種情況下，可以使用Vue API中類似React的set方法。
如果你希望你的程序更小更快，那麽請選擇Vue
React和Vue都將構建一個虛擬DOM，並且在應用程序狀態更改時同步更新實際的DOM。兩者都有自己的優化方法。Vue核心開發人員提供了一個基準測試，展示了Vue的渲染系統比React的更快。在這個測試中，10000個項目的列表被渲染了100次。下面的表格展示了比較的結果。
從實際角度而言，這種基準只與邊緣情況有關。大多數應用程序不需要經常進行這種操作，因此不能將其視為比較的一個重要因素。
雖然頁面的大小與項目相關，Vue又占據了優勢。目前發布的Vue庫只有25.6KB。
要用React實現類似的功能，你需要使用React DOM（37.4KB）和React with Addons庫（11.4KB），總共為48.8KB，幾乎是Vue的兩倍。為了公平起見，你可以使用React獲得更多的API，但是不會有雙倍的功能。
如果你想要構建大型應用程序，那麽請選擇React
用Vue和React來實現簡單的應用程序，就像本文開頭所說的一樣，大部分開發者會偏向於Vue。這是因為基於模板的應用程序乍看更容易理解，並且能夠更快啟動。
但是這些初始的好處會導致大型程序進展緩慢。模板很容易出現運行時錯誤，難以測試，也不容易重構或分解。
相比之下，JavaScript制作的模板可以被組織成可分解的組件，DRY code也更容易重用和測試。
Vue也具有組件系統和渲染功能。但是React的渲染系統配置性更高，並且具有淺渲染的特性，與React的測試程序結合時，可以提供更多可測試和可維護的代碼。
同時，React不可變的代碼並不簡單，當透明度和可測試性至關重要時，它會發揮更大的作用。
如果你想要一個同時適用於web和原生APP的庫，那麽請選擇React
React Native是用JavaScript創建原生APP的庫。它與React相同，只是將web組件換成了原生組件。如果你學習了React.js，那麽你很快就可以學會React Native，反之亦然。
import React, { Component } from ‘react‘;
import { AppRegistry, Text, View } from ‘react-native‘;
class HelloWorld extends Component {
render() {
return (
<View>
<Text>Hello, React Native!</Text>
</View>
);
}
}
AppRegistry.registerComponent(‘HelloWorld‘, () => HelloWorld);重要的是，開發人員可以構建一個web或者原生APP，他們不需要不同的知識體系和工具。如果您打算開發web和移動APP，React會給你帶來巨大沖擊。
阿裏巴巴的Weex是另一個跨平臺UI項目。目前，它認為Vue提供了靈感，並且使用了很多相同的語法，並計劃完全集成Vue。但是，這個計劃的時間表和細節尚未清晰。
由於Vue將HTML模板作為其設計的核心部分，也沒有將客戶端渲染作為當前的特性，因此很難看到原生的Vue像React.js或React Native一樣緊密。
如果你想要最大的生態系統，那麽請選擇React
毫無疑問，React目前是最受歡迎的庫，NPM下載量每月約2.5M，Vue每月的下載量為225k。
人氣帶來的好處不止一點半點。這意味有更多的文章、教程和Stack Overflow回答能夠幫助。也意味著在項目中有更多的工具和附加組件可用，同時節省了開發人員自己構建所有模塊的時間。
兩者都是開源的，但是React誕生自Facebook，受益於它。開發者和熱愛React的公司都可以保障React一直被維護。
相比之下，Evan You一個人創建了Vue，同時他也是Vue唯一的全職維護人員。Vue得到了一些企業的贊助，但是還達不到Facebook或是Google的規模。
為了使得Vue團隊更為可信，它的小體積和獨立性目前並不被當做劣勢。Vue有規律的發布周期，令人印象深刻的是，Vue在Github上只有54個公開的問題，3456個關閉的問題，而React有530個開放問題，3447個關閉的問題。
如果你已經選擇了其中的一個，那麽也不需要換了
總而言之，我們發現，Vue的優勢是：
-
模板或渲染的靈活選項
-
語法以及項目設置的簡單
-
渲染速度更快，體積更小
React的優勢是：
-
更大的規模、更多的使用者、更好的可測試性
-
Web和原生APP
-
能提供更多支持和工具的更大的生態系統
然而，React和Vue都是優秀的UI庫，並且具有更多的相似之處。它們都有的優勢是：
-
使用虛擬DOM快速渲染
-
輕量級
-
響應式組件
-
服務端渲染
-
輕松集成的的路由、捆綁和狀態管理
-
強大的支持和社區
如果你認為我們漏掉了一些東西，歡迎在評論中說明。Happy developing！
React技術實踐（1）