干貨!教大家如何選擇Vue和React

更新時(shí)間：2017年03月13日 11:56:48 投稿：lijiao

Vue和React之間如何選擇，這篇文章主要為大家詳細(xì)介紹了Vue和React兩者之間的相同之處，教大家該如何進(jìn)行選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

兩者之間的相同之處

同樣是基于組件開(kāi)發(fā)的輕量級(jí)框架，同樣是專注于用戶界面的視圖view層。

如何選擇

1.1 如果喜歡用模板搭建應(yīng)用（或者有這個(gè)想法）選擇Vue

Vue應(yīng)用默認(rèn)的是把markup放在HTML中，數(shù)據(jù)綁定表達(dá)式和Angular一樣，采用{{}}的形式，而指令（特殊的HTML屬性）用來(lái)向模板中添加功能

<div> <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JS
new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 },
 methods: {
 reverseMessage: function () {
  this.message = this.message.split('').reverse().join('');
 }
 }
});

React使用的是JSX語(yǔ)法（在JavaScript中創(chuàng)建DOM），而不使用模板。

<div id="app"></div>
// JS (pre-transpilation)
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'));

模板可以更好地把布局和功能分隔開(kāi)，但是需要學(xué)習(xí)所有的HTML擴(kuò)展語(yǔ)法，而渲染函數(shù)只需要標(biāo)準(zhǔn)的HTML和JavaScript。

注意：vue2.0提供使用模板和渲染函數(shù)的選項(xiàng)

1.2 想要簡(jiǎn)單一點(diǎn)的語(yǔ)法，和更快的渲染速度，選擇vue

使用Vue不需要轉(zhuǎn)譯，直接運(yùn)行在瀏覽器中，但是React代碼重度依賴于JSX和ES6語(yǔ)法。

1.2.1 兩者處理數(shù)據(jù)的方式不一樣

vue的數(shù)據(jù)可變，React的數(shù)據(jù)不可變

//vue
this.message = this.message.split('').reverse().join('');
//React
this.setState({ 
 message: this.state.message.split('').reverse().join('') 
});

對(duì)于state的數(shù)據(jù)變化，Vue比React的重新渲染系統(tǒng)更快更有效率。

1.3 想要構(gòu)建一個(gè)大型的應(yīng)用程序，選擇React

模板的使用會(huì)阻礙應(yīng)用擴(kuò)展到更大規(guī)模，模板容易出現(xiàn)很難注意到的運(yùn)行時(shí)的錯(cuò)誤，同時(shí)也很難去測(cè)試，重構(gòu)，分解。

1.4 想要一個(gè)同時(shí)適用于web端和原生APP的框架，選擇React

React Native 是一個(gè)使用JavaScript構(gòu)建出移動(dòng)端原生應(yīng)用程序（ios Android）的庫(kù)，與React。js相同，只是不使用web組件，而是使用原生組件，只要會(huì)其中一個(gè)，就會(huì)另一個(gè)，
這樣無(wú)論是開(kāi)發(fā)web端還是移動(dòng)端都可以用。

1.5 要最大的生態(tài)系統(tǒng)，最全面問(wèn)題解決，更全的工具和插件可以使用React

具數(shù)量統(tǒng)計(jì)，React在npm上的下載量為250萬(wàn)/月，vue為22.5萬(wàn)/月

React是facebook的，會(huì)得到全面的支持與維護(hù)，vue是尤雨溪

帶領(lǐng)的小團(tuán)隊(duì)維護(hù)的。

總結(jié)一下，我們發(fā)現(xiàn)的，Vue的優(yōu)勢(shì)是：

- 模板和渲染函數(shù)的彈性選擇
- 簡(jiǎn)單的語(yǔ)法和項(xiàng)目配置
- 更快的渲染速度和更小的體積

React的優(yōu)勢(shì)是：

- 更適合大型應(yīng)用和更好的可測(cè)試性
- Web端和移動(dòng)端原生APP通吃
- 更大的生態(tài)系統(tǒng)，更多的支持和好用的工具
- 然而，React和Vue都是很優(yōu)秀的框架，它們之間的相似之處多過(guò)不同- 之處，并且大部分的優(yōu)秀功能是相通的：
* 用虛擬DOM實(shí)現(xiàn)快速渲染
* 輕量級(jí)
* 響應(yīng)式組件
* 服務(wù)端渲染
* 集成路由工具，打包工具，狀態(tài)管理工具的難度低
* 優(yōu)秀的支持和社區(qū)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: