前端框架選擇:React與Vue的對比

1.如果習慣使用模板語言構建應用程序,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'));

2.如果喜歡簡單的能正常工作的,請選擇Vue

一個簡單的Vue項目可以不需要解析,直接在瀏覽器中運行,這允許Vue可以像jQuery一樣在項目中引用。 

典型的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方法。

 3.如果要構建大型應用程序,更適合React

用Vue和React來實現簡單的應用程序,就像本文開頭所說的一樣,大部分開發者會偏向於Vue。這是因爲基於模板的應用程序乍看更容易理解,並且能夠更快啓動。

但是這些初始的好處會導致大型程序進展緩慢。模板很容易出現運行時錯誤,難以測試,也不容易重構或分解。

相比之下,JavaScript製作的模板可以被組織成可分解的組件,DRY code也更容易重用和測試。

Vue也具有組件系統和渲染功能。但是React的渲染系統配置性更高,並且具有淺渲染的特性,與React的測試程序結合時,可以提供更多可測試和可維護的代碼。

4.如果要同時適用於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一樣緊密。

5.如果想要最大的生態系統,更適合React

React目前是最受歡迎的庫,NPM下載量每月約2.5M,Vue每月的下載量爲225k。

這意味有更多的文章、教程和Stack Overflow回答能夠幫助。也意味着在項目中有更多的工具和附加組件可用,同時節省了開發人員自己構建所有模塊的時間。

重點:如果你已經選擇了其中的一個,那麼也不需要換了

總結:

Vue的優勢是:

  • 模板或渲染的靈活選項

  • 語法以及項目設置的簡單

  • 渲染速度更快,體積更小

React的優勢是:

  • 更大的規模、更多的使用者、更好的可測試性

  • Web和原生APP

  • 能提供更多支持和工具的更大的生態系統

React和Vue都是優秀的UI庫,並且具有更多的相似之處。

它們都有的優勢是:

  • 使用虛擬DOM快速渲染

  • 輕量級

  • 響應式組件

  • 服務端渲染

  • 輕鬆集成的的路由、捆綁和狀態管理

  • 強大的支持和社區

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章