JSX 到 JS 的转换
2024-08-27 21:26:22
在写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 我们就从来不会写到,但是我们用到的是最多的
最新文章
- A List of Social Tagging Datasets Made Available for Research
- Shell脚本_备份/etc数据
- [转]C++中引用(&;)的用法和应用实例
- magento首页调用最新产品
- JPA学习---第六节:大数据字段映射与字段延迟加载
- 【转】c#文件操作大全(二)
- IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案
- HDU5308-脑补-对拍
- LayoutInflater 原理分析 示例
- php设计模式--注册器模式
- 两句话概括cmd和amd的区别
- SQLServer版本
- python 类的魔法函数 内置函数 类方法 静态方法 抽象类
- RSA算法加解密
- docker 中安装 rabbitMQ
- 在线画UML图的工具
- CentOS6.5 安装+ Tengine + PHP + MySQL
- java string 替换img标签 正则表达式 任意多个字符
- Mongo的安全验证
- python爬取漫画
热门文章
- (转)搭建Elasticsearch和kibana环境
- 【计算机视觉】OpenCV篇(10) - 模式识别中的模板匹配
- Zabbix 3.0 配置企业微信报警(配置zabbix-web)
- 【layui】【jquery】通过layero获取iframe的元素
- PHP写接口需要注意的问题
- Git_从远程branch取回所有最新代码,暴力覆盖本地 &;&; GIT基本结构
- window安装mysql8.0解决大部分客户端无法连接问题登陆问题
- svn-疑难解决
- 异或序列 [set优化DP]
- Deploy custom service on non hadoop node with Apache Ambari