React與Vue

時間 2019-12-07

標籤 react vue 欄目 React 简体版

原文原文鏈接

　　React和vue都是作組件化的，總體的功能都相似，可是他們的設計思路是有不少不一樣的。使用react和vue，主要是理解他們的設計思路的不一樣。css

　　若是你喜歡用（或但願可以用）模板搭建應用，請使用Vue
若是你喜歡簡單和「能用就行」的東西，請使用Vue
若是你的應用須要儘量的小和快，請使用Vue
若是你計劃構建一個大型應用程序，請使用React
若是你想要一個同時適用於Web端和原生App的框架，請選擇React
若是你想要最大的生態圈，請使用React
若是你已經對其中一個用得滿意了，就沒有必要換了html

一、設計思路：vue

　　react總體是函數式的思想，把組件設計成純組件，狀態和邏輯經過參數傳入，因此在react中，是單向數據流，推崇結合immutable來實現數據不可變。react在setState以後會從新走渲染的流程，若是shouldComponentUpdate返回的是true，就繼續渲染，若是返回了false，就不會從新渲染，PureComponent就是重寫了shouldComponentUpdate，而後在裏面做了props和state的淺層對比。

　　而vue的思想是響應式的，也就是基因而數據可變的，經過對每個屬性創建Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。

　　總之，react的性能優化須要手動去作，而vue的性能優化是自動的，可是vue的響應式機制也有問題，就是當state特別多的時候，Watcher也會不少，會致使卡頓，因此 大型應用（狀態特別多的）通常用react，更加可控。

二、簡單能用就行-Vue：react

　　Vue項目不須要轉譯可直接在瀏覽器中使用，這使得在項目中使用Vue能夠像使用jQuery同樣容易。固然這對於React來講在技術上也是可行的，但典型的React代碼是更多地依賴於JSX和諸如class等ES6特性的。而Vue的簡單則是更深層地源於其設計的。讓咱們來比較一下這兩個框架是如何處理應用數據的（即「state」）：typescript

　　React裏的狀態（state）是不可變（immutable）的，所以你不能直接地改變它，而是要用setState API方法：api

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

　　React是經過比較當前狀態和前一個狀態的區別來決定什麼時候及如何從新渲染DOM的內容，所以須要使用不可變的狀態。　　數組

　　而與此相反的是，Vue中的數據是可變的（mutated），因此一樣的數據變量能夠用簡潔得多的方式修改：瀏覽器

// Note that data properties are available as properties of 
// the Vue instance

this.message = this.message.split('').reverse().join('');

　　讓咱們來看看Vue中是如何對狀態進行管理的：當你向狀態中添加一個新對象時，Vue將遍歷其中的全部屬性而且將它們轉換爲getter，setter方法。因而Vue的響應系統開始保持對該狀態的跟蹤，當該狀態的內容發生變化的時候就會自動從新渲染DOM。使人佩服的是，Vue中改變狀態的操做不只更加簡潔，並且它的從新渲染系統實際上比React的更快更高效。性能優化

　　不過Vue的響應系統仍是有些坑的，好比它沒法檢測屬性的添加和刪除，以及某些數組更改。這時候就要用Vue API中的相似於React的set方法的措施來解決。服務器

3、頁面編寫方式：

　　模板搭建應用。

　　Vue應用的默認選項是把markup放入HTML文件中。數據綁定表達式使用的是與Angular類似的雙大括號（moustache）語法，而指令（特殊的HTML屬性）則用於向模板中添加功能。

//HTML
<div id="app">
  <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在JavaScript中建立DOM。JS操做一切

//HTML
<div id="app"></div>

//JS
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開發的新開發者來講，vue是把html，css，js組合到一塊兒，用各自的處理方式，vue有單文件組件，能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理，模板更容易理解。然而甚至連一些資深的開發者也喜歡使用模板，由於模板能更好地把功能和佈局分割開來，還爲使用Pug之類的模板引擎提供了可能。

　　不過使用模板的代價在於你須要學習全部的HTML擴展語法，而渲染函數（render function）只要求會使用標準的HTML和JavaScript。並且比起模板，渲染函數更易於調試和測試。可是，你並不該該所以就錯過Vue，由於在Vue2.0中已經提供了使用模板或者渲染函數的選項。

3、類式的組件寫法，仍是聲明式的寫法：

　　react是類式的寫法，api不多，

image.png

而vue是聲明式的寫法，經過傳入各類options，api和參數都不少。因此react結合typescript更容易一塊兒寫，vue稍微複雜。

image.png

vue結合vue-class-component也能夠實現類式的寫法，可是仍是須要經過decorator來添加聲明，並不純粹。

react能夠經過高階組件（Higher Order Components--HOC）來擴展，而vue須要經過mixins來擴展
一個react高階組件的例子：

vue的mixin的例子：

image.png

React剛開始也有mixin的寫法，經過React.createClass的api，不過如今不多用了。
Vue也不是不能實現高階組件，只是特別麻煩，由於Vue對與組件的option作了各類處理，想實現高階組件就要知道每個option是怎麼處理的，而後正確的設置。具體有多複雜，能夠參考下面的文章。
http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/

咱們發現，Vue的優點包括：