在写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. html5 video标签播放视频流

    从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...

  2. 【ML基础】t-SNE(t-distributed stochastic neighbor embedding)原理及推导

    前言 参考 1. t-SNE原理与推导: 完

  3. ng2 空标签

    <ng-container *ngIf="v.products"> <li class="clearfix" *ngFor="let ...

  4. [PHP] Laravel 体现 MySQL、Sqlite 数据的大小写敏感

    要想实现数据比对的大小写敏感,方式是设置数据库字段类型 或者 字段校验字符集. MySQL 和 Sqlite 所支持的 collations 形式是不同的,你可以通过以下文档了解到. MySQL co ...

  5. 启动Oracle 12c数据库实例

    启动Oracle 12c数据库实例 启动Oracle数据库实例,主要分为两步:第一步,启动监听:第二步,启动数据库实例. 1. 切换到oracle用户- su oracle- cd - source ...

  6. [IISNode] 如何在IIS7/8下,配置一个可以通过IIS访问NodeJS的web项目

    参考了一下几篇很给力的文章,在每篇文章中,都学到了解决遇到的问题的答案: (1)用iisnode模块,让你的Node.js应用跑在Windows系统IIS中 (2)让IIS能够运行Nodejs (3) ...

  7. Redis Sentinel分布式集群

    helm部署Redis哨兵分布式集群 Redis Sentinel集群 介绍 Redis Sentinel集群是由若干Sentinel节点组成的分布式集群,可以实现故障发现.故障自动转移.配置中心和客 ...

  8. activiti学习3:流程引擎对象和流程引擎配置对象

    目录 activiti学习3:流程引擎对象和流程引擎配置对象 一.activiti的简单使用流程 二.流程引擎配置对象ProcessEngineConfiguration的介绍 三.activiti配 ...

  9. 推荐系统中的协同滤波算法___使用SVD

    对于推荐方法,基于内容 和 基于协同过滤 是目前的主流推荐算法,很多电子商务网站的推荐系统都是基于这两种算法的. 协同过滤 是一种基于相似性来进行推荐的算法,主要分为 基于用户的协同过滤算法 和 基于 ...

  10. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...