前端的对决：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工程化等）的小智原创翻译。