React Native 学习 之JSX

前端之家收集整理的这篇文章主要介绍了React Native 学习 之JSX前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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解析。

猜你在找的React相关文章