博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React源码解析(一):JSX到javascript
阅读量:5743 次
发布时间:2019-06-18

本文共 1290 字,大约阅读时间需要 4 分钟。

使用jsx可以写类似html的标签,通过声明一个html标签,然后呢会返回一个react内识别的对象,如下:

babel转化前

2
1
1
复制代码

转化后

"use strict";React.createElement("div", {    id: "div",    className: "div",    key: "div"  },   React.createElement("div", null, React.createElement("span", null, "2")),   React.createElement("span", null, "1"), React.createElement("span", null, "1"));复制代码

组件的转化

function Comp() {	return 
111
}
222
222
-----------------------------------------------------------------------------------function comp() { return
111
}
222
222
复制代码

转化后

"use strict";function Comp() {  return React.createElement("div", null, "111");}React.createElement(Comp, {    id: "div",    className: "div",    key: "div"  },   React.createElement("span", null, "222"),   React.createElement("span", null, "222"));-----------------------------------------------------------------------------------"use strict";function comp() {  return React.createElement("div", null, "111");}React.createElement('comp', {    id: "div",    className: "div",    key: "div"  },   React.createElement("span", null, "222"),   React.createElement("span", null, "222"));复制代码

注意:从上面的例子我们可以看到这就是为什么要求我们组件要首字母大写,因为小写它会当做一个标签来处理,最后会转化成一个字符串,然后如果没有这个标签就会报错。

转载地址:http://yxszx.baihongyu.com/

你可能感兴趣的文章
最长递增子序列 动态规划
查看>>
原生CSS设置网站主题色—CSS变量赋值
查看>>
webpack 4.0 中 clean-webpack-plugin 的使用
查看>>
中文词频统计
查看>>
POJ 2236 Wireless Network (并查集)
查看>>
python分类
查看>>
GitBlit (1)-- 在linux 安装 GitBlit 并运行
查看>>
程序是如何执行的(一)a=a+1
查看>>
18 已知下面的字符串是通过RANDOM随机数变量md5sum|cut-c 1-8截取后的结果
查看>>
BZOJ - 3578: GTY的人类基因组计划2
查看>>
爱——无题
查看>>
分布式服务框架原来与实践 读书笔记一
查看>>
【http】post和get请求的区别
查看>>
TFS强制撤销某个工作区的文件签出记录
查看>>
EL表达式无法显示Model中的数据
查看>>
ps6-工具的基础使用
查看>>
灵活运用 SQL SERVER FOR XML PATH
查看>>
linux下使用过的命令总结(未整理完)
查看>>
时间助理 时之助
查看>>
英国征召前黑客组建“网络兵团”
查看>>