JSX是什么
字面上来看JSX即 JavaScript XML取首字母结合,所以JSX并不是一门新语言,仅仅是个语法糖。
React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
我们在浏览器运行的时候,JSX语法会通过Babel转换成浏览器认识的JS。
Babel:我们装RN的时候你会再目录看到很多Babel文件夹,JSX语法依赖于Babel进行解析翻译。 那么问题来了,这种虚拟DOM的方式会不会影响性能呢。
答案肯定是不会的,反而会比我们操作DOM性能更好,其实我们也可以自己用JS写一个虚拟DOM,一般水平有限的写还是有困难的,就算写出来,也不一定有别人的性能强,React 虚拟DOM用了Diff算法,降低了频发而发展的操作DOM,所以性能是增强的。
JSX的优点:
1☞类XML语法,容易扩展。 2☞增强JS语义 3☞结构清晰 4☞抽象程度高 5☞代码模块化
1.JSX 中嵌入变量,表达式,样式
这段Demo在标签里嵌入了变量,表达式和样式两种写法
2.函数调用
函数和JS函数写法是一样的格式如下:
funcName (参数){实现内容}
需要注意RN 标签中的函数调用,简要的说下载render()函数中的调用规则。
①.如果你需要在render中直接调用的话和普通js调用规则相同。如下面的例子:
②.如果您在render中直接调用函数得到标签去搭建界面的话。如下面的例子:
③.如果需要循环创建页面,render中的标签下面调用的话你需要在{}中调用函数,如下面的例子:
3. render中渲染固定标签数组,如下面的例子:
JSX语法可以当做加强版的JS,在React中使用,依赖Babel编译。
JSX最明显的特点就是可以在JS中写标签,并不用加引号,在标签里使用JS变量也十分方便 ,在标签里当遇到{}当做JS解析。