react與vue

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> <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> </template> <script> export default { name: 'example', data () { return { message: 'Hello' } }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } } } </script>

• class的動態語法讓我感受很是爽

在實踐中咱們會發現很是多這樣的場景，須要根據不一樣的狀態來決定一個元素class的具體值。而若是僅僅只是簡單的表達式或者條件判斷在jsx模板中，例以下面這個樣子就會讓人感受很是難受

<p className={active ? 'note active' : 'note'}></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> <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素自己（而不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div>

固然，還有按鍵修飾符等，能夠去官網進一步查看學習。

vue提供的方即可愛的語法糖還有不少，就不細說，你們能夠在官網上一一體驗。正如文章開頭所說，vue會有一些語法限制，而這些語法限制在某種程度上來講下降了咱們的開發成本，提升了開發效率。這大概也就是不少人認爲vue更加簡單易學的緣由所在吧。

就從學習難易程度上來講，react之因此上手更加困難，主要的緣由並不在於react自己，而在於圍繞react的豐富的生態圈。正是因爲react自己足夠簡單，因此咱們須要掌握的react組件就更多。好比react-router，react-redux等。並且不少好用的，功能特別棒的組件在咱們涉獵不廣的時候都不知道。例如我在學習ant-design源碼的時候，經常會驚訝於發現原來這裏有一個組件能夠這樣用，真的好棒！而我在學習vue的時候又會驚訝的發現，原來這麼棒的組件vue直接都已經支持了！

因此後來我才發現，原來vue與react既然如此類似。

我仍然更加偏好於react。但僅僅只是由於react的語法更加接近於ES6而已

學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣343599877，咱們一塊兒學前端！