前端的對決：React的JSX與Vue的templates

React.js和Vue.js是這個星球上最流行的JavaScript庫。它們都很強大，相對來講很容易獲取和使用。

React和Vue的共性：

1. 使用虛擬DOM。

2. 提供響應式視圖組件。

3. 專一於開發過程當中的一個方面。目前集中在視圖層。

有這麼多類似之處，你能夠假設它們都是同一事物的不一樣版本。

這兩個庫之間有一個主要的區別：它們如何讓開發人員建立視圖組件，反過來又能夠應用程序。

React採用JSX（這個詞是react團隊創造的）渲染內容到DOM。那麼什麼是JSX？基本上，JSX是一個JavaScript渲染功能，幫助你將你的HTML放到你的JavaScript代碼中合適的地方。

Vue採用不一樣的方法，使用HTML模板。使用Vue模板就像是用JSX就是他們都是建立使用JavaScript。主要的區別是，JSX函數在實際的HTML文件中歷來不被使用，而Vue模板不是這樣。

特別說明下，Vue.js的相關課程能夠點擊這裏。

React JSX

咱們將深刻探討JSX如何工做。假設你有一個要在DOM上顯示的名稱列表。大家公司最近的一份新員工名單。

若是你使用的是普通的HTML，你首先須要建立一個index.html文件。而後，你將添加如下代碼行。

<ul>
<li> John </li>
<li> Sarah </li>
<li> Kevin </li>
<li> Alice </li>
<ul>
</pre>

這裏沒什麼好說的，只是普通的HTML代碼。

那麼你使用JSX怎麼作一樣的事情？第一步是建立一個index.html文件。可是，不像之前那樣添加完整的HTML，只須要添加一個簡單的div元素。這個div將是容器元素，在那裏您的全部React代碼將被呈現。

div將須要一個惟一的ID，這樣React就知道如何能夠找到它。facebook傾向於支持根關鍵字，因此讓咱們堅持這一點。

<div id=root></div>

如今，走到最重要的一步。建立包含全部react代碼的JavaScript文件。這是一個叫app.js的文件。

你如今把全部的事情都排除在外，進入主事件。用JSX顯示全部新員工到 DOM中。

首先須要建立一個具備新僱員名稱的數組。

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];

從那裏，您須要建立一個響應元素，它將動態地呈現整個名稱列表。這你沒有必要再手動顯示每個。

<ul>
{names.map(name => <li>{name}</li> )}
</ul>
);

這裏要注意的關鍵是，您沒必要建立單獨的**<li>元素。你只須要描述你想讓他們看一次，React會處理剩下的。這是一件很是給力的事。雖然你只有幾個名字，但想象一下有成百上千的名單！你能夠看到這固然是一個更好的方法。特別是若是<li>**元素，比這裏用到的元素更復雜。

代碼的最後一步是須要將內容渲染到屏幕，主要是經過ReactDom的render渲染函數。

ReactDOM.render(
displayNewHires,
document.getElementById(‘root’)
);

在這裏，你在用div裏的內容做出響應，經過displayNewHires渲染root元素。

那麼最終的React代碼就應該是這個樣子：

const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];
const displayNewHires = (
<ul>
{names.map(name => <li>{name}</li> )}
</ul>
);
ReactDOM.render(
displayNewHires,
document.getElementById(‘root’)
);

這裏要記住的一個關鍵是，這是全部的React代碼。這意味着它都將編譯成普通的JavaScript。下面是它最終看起來的樣子：

‘use strict’;

var names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];

var displayNewHires = React.createElement(
‘ul’,
null,

names.map(function (name) {
 return React.createElement(
 ‘li’,
 null,
 name
 );
})
);

ReactDOM.render(displayNewHires, document.getElementById(‘root’));

這就是它的所有。如今有一個簡單的React應用程序，它將顯示名稱列表。沒有什麼能夠寫的，但它應該能讓你瞭解React的能力是什麼。

特別說明下，react.js的相關課程能夠點擊這裏。

Vue.js Templates（模板）

按照最後一個示例，您將再次建立一個簡單的應用程序，它將在瀏覽器上顯示名稱列表。

你須要作的第一件事就是建立一個空的index.html文件。在該文件中，您將建立一個帶有根ID的空div。記住，根只是我的偏好。你能夠調用你的ID不管什麼狀況下。您只需確保稍後將HTML與JavaScript代碼同步時匹配起來便可。

這個div會像它在React中那樣起做用。它會告訴JavaScript庫，在這個示例中，開始改變的時候在哪裏觀察DOM。

一旦這樣作了，你將建立一個JavaScript文件，將存放Vue代碼。稱它爲app.js，以便保持一致。

如今你已經準備好你的文件，讓咱們看看Vue如何顯示元素到瀏覽器。

Vue使用模板的方法用它來操做DOM。這意味着你的HTML文件不只會有一個空的div，好比在React中。實際上，您將在HTML文件中編寫一部分代碼。

爲了給你一個更好的提醒，回想一下使用普通HTML建立名稱列表須要什麼。一個**<ul>包含一些的<li>**元素。在Vue，你要作幾乎相同的事情，只有少數的變化增長。

建立一個**<ul>**。

<ul>
</ul>

如今添加一個空的**<li>**。

<ul>
<li>
</li>
</ul>

沒什麼新鮮的變化，經過增長一個指令，一個自定義的Vue的屬性你的**<li>**元素。

<ul>
<li v-for=’name in listOfNames’>
</li>
</ul>

指令是Vue直接進入HTML添加JavaScript功能的方式。它們都以V開頭，後面跟着描述性的名字，讓你知道他們在作什麼。在這個實例中，它是for循環。每個名字在你的名字列表listOfNames中，你能夠從你的名單列表上覆制這個<li>元素和更換一個新的<li>元素來肯定一個的名字。

如今，代碼只須要最後一次編寫。當前，它將爲列表中的顯示每一個名稱，但實際上並無告訴它將把實際名稱顯示在瀏覽器上。爲了解決這個問題，你將在你的<li>中插入一些相似mustache的語法。你可能在其餘JavaScript庫中看到的相似東西。

<ul>
<li v-for=’name in listOfNames’>
{{name}}
</li>
</ul>

如今<li> 元素是寫完了。它如今將顯示名字爲listOfNames列表的每一個項。記住name能夠是任何其餘的名稱。你能夠把它叫作item，它也會達到一樣的目的。全部關鍵字都用做佔位符，用於在列表中迭代。

你須要作的最後一件事就是建立數據集和在實際應用程序中初始化Vue。

這樣作，你將須要建立一個新的Vue實例。經過將它分配給名爲app的變量來實例化它。

let app = new Vue({
});

如今，對象將包含一些參數。第一個是最重要的，el (element) 參數告訴Vue在DOM開始添加什麼內容。就像你對你的React中的例子那樣。

let app = new Vue({
el:’#root’,
});

最後一步是添加數據到Vue的應用。在Vue，全部的數據都將作爲Vue實例的參數傳送到應用程序。另外，每一個Vue實例只能有一個每種類型參數。雖然有至關多的，但您只須要集中在兩個例子，el和data。

let app = new Vue({
el:’#root’,
data: {
listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
}
});

數據對象將接受一個數組listOfNames。如今，每當您想在應用程序中使用該數據集時，只須要使用指令調用它。很簡單，對吧？

這是最終的代碼：

HTML

<div id=」root」>
<ul>
<li v-for=’name in listOfNames’>
{{name}}
</li>
</ul>
</div>

JavaScript

new Vue({
el:」#root」,
data: {
listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’]
}
});

結論

如今你知道如何使用React和Vue建立兩個簡單的應用程序。他們都提供了強大的功能，雖然Vue看起來每每是更容易使用。還有須要記住，Vue也支持JSX的使用，雖然它不是首選的實現方法。

不管哪一種方式，Vue和React都是兩個功能強大的庫，你使用任何一個都不會有問題。

若是你以爲這篇文章頗有幫助，給我一些掌聲。

你能夠在Twitter上跟蹤我！

匯智網（www.hubwiz.com，有不少很棒vue.js的課程包括vue.js\vuex\vue-router\vue工程化等）的小智原創翻譯。