什么是jsx?
JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度。所以jsx就是在javascript中来编写长得很像xml的语言,这里只是像,在本质上是不一样的。
jsx是一种基于Ecmascript的一种新特性,
是一种定义带属性树结构的语法,树结构就是我们的dom结构,属性就是dom节点中的属性,比如所class,id等
jsx不是xml或者Html,
不是一种限制。在react中,我们可以使用jsx来编写代码,也可以使用纯javascript来编写代码,所以说即使你不学jsx也可以正常使用react,但是Facebook官方腿甲使用jsx来编写。为什么我们要使用jsx呢?
因为jsx有五个特点
第一个:类xml语法容易接受,在实际的工程中,还有别的人员接触前端代码,比如设计师,测试等等,他们很多人可能不熟悉javascript,但是很多人熟悉xml
第二个:增强js的语义,js主要体现在界面的逻辑方面,但是对于界面元素的表现,js是比较弱的,在不使用jsx之前,大部分时候我们使用的是模板,模板其实就是一段字 符串,你在模板里面写东西是可以的,模板的问题在于他页面的内容本身是分离的,并且模板本身是字符串,我们很难对其进行扩展,但是jsx是直接在js的基础上去编写
html,他的本质并不是字符串,就是js语言本身,所以说他可以在语义层面上增强js
第三个:结构清晰,使用jsx来编写代码,我们通过代码就可以知道生成的结果是什么,就像看html代码一样。
第四个:抽象程度高,带来的第一个好处就是,react屏蔽掉了所有的手动dom操作,之所以能够屏蔽dom操作,就是因为他像上提供了一个新的抽象层,作为开发者我们
只需要关注这一个抽象层,而不必关心抽象层下面到底是如何去实现的,从而屏蔽掉了手动的dom操作,抽象带来的第二个好处就是跨平台,从而诞生了react native。 为什么可以跨平台呢?你使用jsx去编写的时候,其实是独立于平台的语法,你设计是平台本身,react完全可以在不同的平台上提供解释器,从而可以让你的代码执行在不 同的平台上,所以我们说抽象是jsx的核心。
第五个:代码模块化,在传统的MVC开发中,MVC其实是分离的,无论是在概念上,还是在实际的代码上,他们三者往往都不会放在一起,但是在react中,我们发现,编 写一个组件的时候,他的相关代码全部都放在了一起,jsx中,既可以js的逻辑,有可以写页面的结构,乍一看,好像是不太合适,我们学到的经验是吧不同的经验区分出 来,有助于开发的进行。那react将他们都混在了一起,这样是一个好的选择吗?其实react所做的部分是一个横向的划分,MVC所做的事情是纵向的划分,也就是手MVC 把整个项目从上到下切了两刀,把它切成了三个部分,但是react所做的事情是把一个项目从左到右,切成了很多部分,或者说他既结合了从上到下,又结合了从左到右, 把一个大的项目打散成为了许多小的项目,从而实现代码的模块化,在代码的力度变得非常小的时候,我们就可以专注于一个非常具体的功能,在这种情况下,把他们的代 码都放在一起,更有助于理解,并且有助于代码本身的组织是,是想一下,如果你把你一个项目拆成了几十上百个晓得模块,你还要在每一个模块上运用MVC的方法,分 成三个甚至是更多个文件,那么这个项目本身就要维护成百上千个文件了,这是一件非常可怕的事情,所以说在我们讨论代码划分的合理性时,一定要研究清楚前提条件, 也就是代码的规模的大小.jsx的语法
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26