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