React Native 学习之JSX

发布时间：2020-12-15 06:48:06 所属栏目：百科来源：网络整理

导读：JSX是什么字面上来看JSX即 JavaScript XML取首字母结合，所以JSX并不是一门新语言，仅仅是个语法糖。 React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到，JSX就当HTML解析，遇到{就当JavaScript解析。我们在浏览器运行的时候，JSX语法会通过 Babel转换成

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 Native 学习 之JSX

JSX是什么

那么问题来了，这种虚拟DOM的方式会不会影响性能呢。

1.JSX 中嵌入变量，表达式，样式

React Native 学习之JSX