在写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. All LeetCode Questions List 题目汇总

    All LeetCode Questions List(Part of Answers, still updating) 题目汇总及部分答案(持续更新中) Leetcode problems clas ...

  2. shell中 >/dev/null 2>&1是什么意思

    原文地址:http://juke.outofmemory.cn/entry/295292 我们经常能在 shell 脚本中发现 >/dev/null 2>&1 这样的语句.以前的我 ...

  3. [ARM-Linux开发]Linux下加载.ko驱动模块的两种方法:insmod与modprobe

    假设要加载的驱动程序模块名为SHT21.ko 加载驱动模块 方法一:  进入SHT21.ko驱动模块文件所在的目录,然后直接  insmod SHT21.ko  即可 方法二:  将SHT21.ko文 ...

  4. 阿里云 安装docker

    转  https://www.jianshu.com/p/f02d63ee98e0

  5. springboot结合日志门面SLF4j和日志实现Logback的使用

    一.此处主要介绍在springboot工程下如何使用 logback + slf4j  进行日志记录. logback主要包含三个组成部分:Loggers(日志记录器).Appenders(输出目的在 ...

  6. 测试代码的练习2——python编程从入门到实践

    11-3 雇员:编写一个名为Employee的类,其方法__init__() 接受名.姓和年薪,并将它们都存储在属性中.编写一个名为give_raise()的方法,它默认将年薪增加5000美元,但也能 ...

  7. javascript document.createElement() document.createTextNode() appendChild()

    //--------------document.createElement("div") var div = document.createElement("div&q ...

  8. Equalizing Two Strings CodeForces - 1256F (思维)

    大意: 给定两个串$s,t$, 每次操作任选长度$len$, 分别翻转$s,t$中一个长$len$的子串, 可以进行任意次操作, 求判断能否使$s$和$t$相同. 字符出现次数不一样显然无解, 否则若 ...

  9. vue-cli输入命令vue ui没效果

    最近用vue-cli脚手架很顺口,特别是UI控制台,在这里,创建项目和搭建本地环境,连接服务端变得很容易,页面ui也是一流 要怎么启动呢?在终端输入命令行vue ui,启动UI控制台,然后往浏览器输入 ...

  10. WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里?

    原文:WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里? 在 WPF 程序中,我们有 Mouse.GetPosition(IInputElement relativeTo) 方法可以拿到鼠标 ...