文档章节

前端的对决:React的JSX与Vue的templates

笔阁
 笔阁
发布于 01/04 12:17
字数 2132
阅读 833
收藏 4
点赞 0
评论 3

vue's templates&react'JSX

React.jsVue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。

ReactVue的共性:

  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>**元素,比这里用到的元素更复杂。

代码的最后一步是需要将内容渲染到屏幕,主要是通过ReactDomrender渲染函数。

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实例只能有一个每种类型参数。虽然有相当多的,但您只需要集中在两个例子,eldata

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工程化等)的小智原创翻译。

© 著作权归作者所有

笔阁
粉丝 172
博文 108
码字总数 195204
作品 0
海淀
程序员
加载中

评论(3)

滔哥
滔哥
无论哪种方式,Vue和React都是两个功能强大的库,你使用任何一个都不会有问题。

有了这句话,感觉文章一下子变成了一篇广告软文了。。。。
笔阁
笔阁

引用来自“是零壹啊”的评论

vue使用JSX的场景是在逻辑组件上,普通的视图组件用template已经够了
:+1:
是零壹啊
是零壹啊
vue使用JSX的场景是在逻辑组件上,普通的视图组件用template已经够了
[译] Vue.js 还是 React?你会选择哪一个?为什么?

原文地址:Vue.js or React ? Which you would chose and why? 原文作者:evilpingwin 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:allenlongbaobao 校对者:Kyl...

allenWang
06/17
0
0
Vue.js 还是 React?你会选择哪一个?为什么?

两者之间的区别很有意思,但不仅仅局限于 JSX 与 Templates 或者丰富的 API 与少量的 API 的区别。React 和 Vue 两者之间的选择可能导致截然不同的结果,这一点在你一开始选择的时候可能并没...

凤囚凰丶
06/14
0
0
前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component...

cacao111
07/11
0
0
前端的对决:React的JSX与Vue的templates

vue's templates&react'JSX React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。 React和Vue的共性: 使用虚拟DOM。 提供响应式视图组件。 专注于...

汇智网
01/04
0
0
说说我眼中的Vue和React

前序 我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里...

a独家记忆
07/10
0
0
关于Vue.js和React.js,听听国外的开发者怎么说?

VueJS 与 ReactJS 到底怎么样如何?听听别人怎么说。 使用所有新的库和框架,很难跟上所有这些库和框架,也就是说,这就需要您决定哪些是值得花时间的。 让我们看看人们说什么: “和Vue.JS一...

马拉喀什
01/05
0
0
Vue会了吗?来认识一下React吧(上)

前言 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源。作为前端的三大框架之一,React的应用可以说是非常的广泛,包括BAT在内的...

llzzzz
昨天
0
0
JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro
05/30
0
0
在Vue中使用JSX的正确姿势(有福利)

姿势很重要,末尾有福利 vue-antd-ui开源了一段时间后,收到了一些反馈,尤其是Form组件上线后,很多用户对JSX的使用感到迷惑和不习惯,为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组...

zeka
06/14
0
0
为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)

在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本。经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定。 8个月前,我们的前端在使用Angular 2.确...

新前端社区
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微服务架构下的安全认证与鉴权

微服务下常见认证解决方案; OAuth认证与授权; JWT认证介绍; Spring Cloud的OAuth2实现; 单体应用转变为分布式应用 单体应用转变为分布式应用在架构方式上存在较大区别,单体应用下的简单...

Java大蜗牛
27分钟前
0
0
前端面试题汇总

最近在复习,准备找工作了,特此总结一下前端的相关知识。 1.获取浏览器URL中查询字符的参数: function getQuery(name){    var reg = new RegExp("(^|&)"+name+"=([^&]*)"(&|$));...

凛冬来袭
28分钟前
0
0
可持续发展的学习道路

与其要求别人,不如提升自己 内心渴望进步 经常做出改变现有模式,不断学习 寻找资源,整合资源,不断熟练这种模式 渠道很重要 先打开新世界的航路

狮子狗
32分钟前
0
0
apollox-lua开源项目 示例codepen2

今天在示例上增加了几个功能, 首先添加js array的标准库。 所有js array的方法目前都支持了。 添加查看code模式。 点击查看code可以看到生成的lua代码。默认web模式需要把标准库连接进来, ...

钟元OSS
48分钟前
0
0
javascript性能优化之避免重复工作

javascript最重要也最根本的性能优化标准之一是避免工作,避免工作又包括两点,第一,不做不必要的工作,第二,不做重复的已经完成的工作。第一部分可以通过代码重构完成,第二部分不做重复的...

老韭菜
59分钟前
0
0
缓存穿透、并发和雪崩那些事

0 题记 缓存穿透、缓存并发和缓存雪崩是常见的由于并发量大而导致的缓存问题,本文讲解其产生原因和解决方案。 缓存穿透通常是由恶意攻击或者无意造成的;缓存并发是由设计不足造成的;缓存雪...

Java填坑之路
今天
1
0
项目jar包管理构建工具---Maven

一、what is Maven? 我们来寻找一下官网,里面介绍了maven到底是什么?下面一句话就有讲解到:Apache Maven is a software project management and comprehension tool. Based on the conc...

一看就喷亏的小猿
今天
0
0
JVM学习手册(一):查看堆内存使用情况以及排错

平时出现内存溢出以及死锁,一般处理方式都是查看日志,找到抛出异常的代码行,然后本地分析代码,但是这样对于线上排查十分糟糕,这段时间在研究JVM发现了几个比较好的工具和指令. 1.针对频繁GC和...

勤奋的蚂蚁
今天
1
0
17.TCP:传输控制协议

介绍 TCP和UDP使用同一网络层(IP),但TCP提供了面向连接、可靠的传输层服务 TCP传输给IP层的信息单位称为报文段或段 TCP通过如下方式保证可靠性: 应用数据被分割成TCP认为最合适发送的数据...

loda0128
今天
0
0
重装Oracle时出现environment variable "PATH"错误的解决办法

在win7 64位下重新安装oracle 11g,一直报environment variable "PATH"的错误,按说明将path里多余的路径删除,但没办法解决。选择忽略错误继续安装,装一半会报CRC错误,还是安装失败。最好...

良言
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部