1. 关于一个 React.CreateElement 的思考
<!--
* @Author: QL
* @Date: 2020-11-18 11:19:32
* @LastEditTime: 2020-11-18 14:01:36
* @FilePath: /react-master/Users/ql/Downloads/index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://unpkg.com/antd@4.8.0/dist/antd.min.js"></script>
<script src="https://unpkg.com/ql_render@1.0.4/dist/ql_render.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/antd@4.8.0/dist/antd.min.css">
<style>
body{
background-color: #f4f4f4;
margin: 0;
color: rgba(0,0,0,.85);
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-variant: tabular-nums;
line-height: 1.5715;
font-feature-settings: "tnum","tnum";
}
#example{
width: 1200px;
margin: 0 auto;
overflow: auto;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6{
font-size: unset;
font-weight: unset;
}
</style>
</head>
<body>
<div id="example"></div>
<div id="example2"></div>
</body>
<script type="text/babel">
const {RenderShow} = window.cliRender;
const {useRef} = window.React;
const CommonA = ()=>{
return <a>123</a>
}
console.log(CommonA)
//ƒ CommonA() {
// return React.createElement("a", null, "123");
// }
ReactDOM.render(<CommonA></CommonA>, document.getElementById("example2"));
</script>
</html>
3 疑问
3.1 我明明写的a 标签 怎么就变成了 React.createElement("a", null, "123")
3.2 为什么 script 标签 type 要写成 text/babel
该属性定义script元素包含或
src
引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript
,text/ecmascript
,application/javascript
, 和application/ecmascript
。如果没有定义这个属性,脚本会被视作JavaScript。如果MIME类型不是JavaScript类型(上述支持的类型),则该元素所包含的内容会被当作数据块而不会被浏览器执行。
如果type属性为
module
,代码会被当作JavaScript模块 。请参见ES6 in Depth: Modules在Firefox中可以通过定义type=application/javascript;version=1.8来使用如let声明这类的JS高版本中的先进特性。 但请注意这是个非标准功能,其他浏览器,特别是基于Chrome的浏览器可能会不支持。
----
所以我们的 type 这种脚本语言 应该是会被解析的 ,于是 我搜索了一下 babel 发现 babel 中对script type 的使用
那就应该肯定是 babel 是对 该type 的内容块 做了单独解析
-- 单独分析一下 他是怎么把 这种jsx 的语法转换成为 我们浏览器能识别的对象的呢
1. 第一步 DomContentLoaded 后 开始执行转换方法
2. 第二步 获取页面中的所有 scripte 标签
3.第三步, 循环script 标签 获取 content (src 中有路径的 或者 直接写在标签间的)
4. 第四步 ,文本 内容转换 拼接到DOM 中自执行