react與vue兩者有什麼差別？-html教學-PHP中文網

vue的選擇居於react與angular之間，框架本身的語法比react多一點，但是又比angular少一點。

也正是因為選擇的不同，所呈現出來的寫法與思考方式就一定會有所差異，不論優劣，但肯定會導致不同的偏好。

react的簡單在於，它的核心API其實非常少。所以我們會看到很多地方在說react其實是一個UI函式庫，並不是一個完整的框架。他只是告訴我們如何創建組件以及組件之間如何進行資料傳遞。甚至於建立元件的方式正是使用ES6的class語法(createClass將會在react 16被丟棄)。

因此開發中react的使用對於ES6的語法依賴度非常高。因為react自身本來就沒有太多強限制的語法。我們只需要掌握組件裡的props，state，ref，生命週期，就好像沒有太多額外的知識了。就連如果想要在jsx模板來遍歷渲染，還得使用原生的map方法。而react的高階元件，理解之後發現，其實就是JavaScript函數式程式設計所涉及的思考方式。

所以在我看來，react的最大特點就是簡單且與原生JavaScript非常接近。即帶給開發者的束縛非常少。一個功能的實現，如果你知道使用原生JavaScript如何實現，那麼你就一定能夠很輕鬆的知道使用react如何實現。

當然，核心API簡單不代表上手容易。在使用之初，如果你經驗缺乏，那麼你用react寫出來的頁面，效能可能會非常差。因為無意識的，你的元件可能會有非常多的多餘的渲染。

例如很多人在學習react的時候，會接觸到一個倒數計時的例子，這個例子使用修改元件中state的方式來實現。但其實後來大家會慢慢知道，這種方式是非常錯誤的。因為state的每次修改，都會導致元件及其所有子元件的重新渲染。這是成本非常高的行為。當然，我還知道很多人，在調試react的時候，由於高頻的重複渲染直接把瀏覽器都卡死的。這些問題都是尤雨溪所擔心的限製過少所帶來的。

網路上有的自以為牛逼的人，用著react/vue這樣的框架，其實寫著shi一樣的程式碼，恐怖的是他們還嘲諷這嘲諷那的。還遇過一個人，口口聲聲說自己用了angular好多年，說angular真的好垃圾啊，性能好差啊，什麼什麼的各種黑，結果連track by都不會用。喝！

而react由於沒有真正意義上的雙向綁定。因此在處理一些複雜場景會非常麻煩，例如複雜的表單驗證。

而相對而言，vue提供的能力則更多一點，這些便捷的能力會讓初學者感覺到非常的幸福，因為很多效果只需要一些簡單的程式碼既可以實現。我大概列舉幾個我個人認為非常棒的能力：

#統一管理的計算屬性

JavaScript的表達式非常便利，無論是vue還是react，表達式的能力是不可或缺的。但正如vue官方文件所說，在模板中放入太多的邏輯會讓模板過重且難以維護。而vue的元件中提供了一個計算屬性來統一管理表達式。

<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: &#39;example&#39;,
    data () {return {message: &#39;Hello&#39;
        }
    },computed: {reversedMessage: function() {return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
        }
    }
}</script>

登入後複製

class的動態語法讓我感覺非常爽

在實務上我們會發現非常多這樣的場景，需要根據不同的狀態來決定一個元素class的具體值。而如果只是簡單的表達式或條件判斷在jsx模板中，例如下面這個樣子就會讓人感覺非常難受

<p className={active ? &#39;note active&#39; : &#39;note&#39;}></p>

登入後複製

當稍微複雜一點的邏輯還這樣處理就是難受到忍不了了。而vue中支援的語法則非常輕鬆的搞定了這個問題。

// 可以放在任何你觉得舒服的位置const pcls = {active: active,note: true
}

<p class={pcls}></p>

登入後複製

這樣我們繼續增加更多的class名稱也不會造成額外的複雜度了。

當然，這只是一個工具方法就能搞定的問題，在使用react時，大家可以藉助classnames來完成同樣的功能。但vue是直接支援了。

雙向綁定

#由於react並不支援雙向綁定，因此在複雜的表單驗證時實現起來非常痛苦。而vue在以單向資料流為核心的同時，又沒有完全拋棄雙向綁定，這讓在這樣複雜的表單驗證場景開發效率比react高出非常多。這也是vue省事兒的一個面向。

修飾符

我們在寫事件處理邏輯時，常常需要e.preventDefault等操作。 vue提供的修飾符功能可以幫助我們省去這些程式碼，極為方便。用多了就會發現，真TM好用。

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><p v-on:click.capture="doThis">...</p><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><p v-on:click.self="doThat">...</p>

登入後複製

當然，還有按鍵修飾符等，可以去官網進一步查看學習。

vue提供的方便可愛的語法糖還有很多，就不細說，大家可以在官網上一一體驗。正如文章開頭所說，vue會有一些語法限制，而這些語法限制在某種程度上來說降低了我們的開發成本，並提高了開發效率。這大概也就是很多人認為vue比較簡單易學的原因吧。

就從學習難易度來說，react之所以上手更加困難，主要的原因並不在於react本身，而在於圍繞react的豐富的生態圈。正是由於react本身夠簡單，所以我們需要掌握的react元件就更多。例如react-router，react-redux等。而且很多好用的，功能特別棒的組件在我們涉獵不廣的時候都不知道。例如我在學習ant-design原始碼的時候，常常會驚訝於發現原來這裡有個元件可以這樣用，真的好棒！而我在學習vue的時候又會驚訝的發現，原來這麼棒的組件vue直接都已經支持了！

所以後來我才發現，原來vue與react既然如此相似。

我還是比較偏好於react。但僅僅只是因為react的語法更接近ES6而已

以上是react與vue兩者有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！