React cdn 引用为什么要＜script type=‘text/babel‘＞＜/script＞

最新推荐文章于 2022-07-26 23:28:37 发布

b7410852963

最新推荐文章于 2022-07-26 23:28:37 发布

阅读量4.7k

点赞数 13

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/b7410852963/article/details/109773559

版权

React 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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

MDN 中对script type 的解释

该属性定义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 中自执行

结论：

1. 浏览器不能直接执行我们写的 JSX 代码，而是通过babel 转换后的代码，所以我们看到的代码输出的是 React.createMent('a',null,'123')

2. MIME类型不是JavaScript类型，则该元素所包含的内容会被当作数据块而不会被浏览器执行

b7410852963

关注

13
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
React cdn 引用为什么要＜script type=‘text/babel‘＞＜/script＞

1. 关于一个 React.CreateElement 的思考<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫