在写react代码的时候,大部分同学应该都是写JSX。因为相比于写纯JavaScript。写JSX为我们去写组件,比写一些在JavaScript当中写类似于html结构的这种代码是要方便非常非常多的,他的可阅读性,可维护性都要高很多的。那么JSX他的魔力在哪里,能够让我们在JS里面写html代码。
JSX相对于JavaScript来讲,他的唯一的一个区别就是他可以写类似于html的标签。
https://www.babeljs.cn/repl 在这个网址写示例
左边
<div></div>
右边
"use strict";
React.createElement("div", null);

在左边我们声明了html的标签,他在右边会返回一个我们在react当中我们需要返回的一个对象。这就是 JSX 到 JS 的一个转换过程

我们会发现通过这种标签写的,他最终都会转换成 React.createElement 。里面的标签名,属性,内容都会通过参数给他。

左边
<div id='div' key='key'>test</div>
右边
React.createElement("div", {
id: "div",
key: "key"
}, "test");

会把所有的属性放在第二个参数,第二个参数是个对象,都会加在这个对象里面给他。第三个参数在 React 中称为 children ,也就是标签内容

如果标签里面也有标签
左边
<div id='div' key='key'>
<span>spanTest</span>
</div>
右边
React.createElement("div", {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"));

因为span他也是标签,所有第三个参数传内容的地方,再次将标签转换成 React.createElement 。

再复制一个节点
左边
<div id='div' key='key'>
<span>spanTest</span>
<span>spanTest</span>
</div>
右边
React.createElement("div", {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"),
React.createElement("span", null, "spanTest"));

会发现第三个以后都是节点,多少个节点,后面就多少个 React.createElement 。这就是 JSX 转换成 JS 的样子。在这里我们看到第一个参数是个字符串。那么如果这个不是个标签,是个组件,他会怎么样呢?

左边
function Comp() {
return <a>123</a>
} <Comp id='div' key='key'>
<span>spanTest</span>
<span>spanTest</span>
</Comp>

右边

function Comp() {
return React.createElement("a", null, "123");
} React.createElement(Comp, {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"), React.createElement("span", null, "spanTest"));

这个时候发现就不再是字符串,而是以变量的方式传递进来。值得注意的是。在目前的babel插件里面,在转化的过程当中,会根据大小写判断。小写认为是原生的html标签,就是以字符串的形式传递,如果是大写,就认为是组件,当做变量传递

React.createElement 我们就从来不会写到,但是我们用到的是最多的

JSX 到 JS 的转换的更多相关文章

  1. Js 日期转换函数(UTC时间转换及日期想加减)

    IOS上Js日期转换中new Date("yyyy-mm-dd")不能正常工作,必须使用new Date("yyyy/MM/dd"); 日期相加减: Date. ...

  2. js数值转换

    先来几个题吧: var num1 = Number("123blue");var num2 = Number("");var num3 = Number([]) ...

  3. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

  4. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  5. Js强制转换

    Js强制转换 ParseInt(a,b):整型 只能放字符串,b为基数.声明前面的数是几进制.因为只能放字符串,所以无论放什么都转换为字符串: 如果String以0x开头则为16进制的整数: ‘036 ...

  6. js字符串转换成数字与数字转换成字符串的实现方法

    转载:点击查看地址 js字符串转换成数字 将字符串转换成数字,得用到parseInt函数.parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt(' ...

  7. js字符串转换成数字,数字转换成字符串

    转自网络,忘记出处了. js字符串转换成数字 将字符串转换成数字,得用到parseInt函数. parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseIn ...

  8. js时间戳转换日期

    //js时间戳转换日期function formatDate(now) { var year=now.getFullYear(); var month=now.getMonth()+1; var da ...

  9. js字节转换、字节格式化函数

    有时候在上传附件后需要显示大小,可以选择在后台处理,也可以在前台用js处理. 比如我们想1024MB转换成1GB,那就需要进行转换,这里只是介绍用js进行转换. function bytesToSiz ...

随机推荐

  1. Python线程池及其原理和使用(超级详细)

    系统启动一个新线程的成本是比较高的,因为它涉及与操作系统的交互.在这种情形下,使用线程池可以很好地提升性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更应该考虑使用线程池. 线程池在系统启动时即 ...

  2. oracle 解决 exp 空表不能导出的问题

    原因:oralce_11g 中有个新特性,当表无数据时,不分配 segment,以节省空间,这也就导致了 exp 在导出表时,没有数据的表会被忽略 方法一:我们可以向表中插入数据,在删除,这样数据表就 ...

  3. 图像拼接(image stitching)

    # OpenCV中stitching的使用 OpenCV提供了高级别的函数封装在Stitcher类中,使用很方便,不用考虑太多的细节. 低级别函数封装在detail命名空间中,展示了OpenCV算法实 ...

  4. OKEx交易所交易记录日期时间转毫秒级时间戳

    本文介绍如何将OKEx交易所成交记录数据中的日期时间转毫秒级时间戳. 作者:比特量化 1. OKEx交易记录格式 [ { "time":"2019-09-14T10:29 ...

  5. 【miscellaneous】【C/C++语言】UTF8与GBK字符编码之间的相互转换

    UTF8与GBK字符编码之间的相互转换 C++ UTF8编码转换 CChineseCode 一 预备知识 1,字符:字符是抽象的最小文本单位.它没有固定的形状(可能是一个字形),而且没有值." ...

  6. Mysql update多表联合更新

    下面我建两个表,并执行一系列sql语句,仔细观察sql执行后表中数据的变化,很容易就能理解多表联合更新的用法 student表                                      ...

  7. STL源码剖析——序列式容器#3 Deque

    Deque是一种双向开口的连续线性空间.所谓的双向开口,就是能在头尾两端分别做元素的插入和删除,而且是在常数的时间内完成.虽然Vector也可以在首端进行元素的插入和删除(利用insert和erase ...

  8. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  9. Python如何获取系统大小端模式

    1. 第一种方法导入sys模块: >>> import sys >>> >>> sys.byteorder 'little' >>&g ...

  10. 手把手教你做JavaWeb项目:登录模块

    现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...