react本质：JSX如何转化为javascript

ChanceWong 发布于2019-08-26 13:44 / 1381人阅读

摘要：中基本都使用来开发，但其实是的一种语法糖。但是我们必须知道，本质上就是在编译的时候，会由将转化为。比如生成了比如生成了解的本质，只需要记住本质就是附录提供的一个在线转换为的地址

react中基本都使用JSX来开发，但JSX其实是javascript的一种语法糖。

什么是语法糖？

语法糖就是提供了一种全新的方式书写代码，但是其实现原理与之前的写法相同。
语法糖可以说是广泛存在于各种计算机代码中，包括C语言中的a[i]其实就是*a+i的语法糖。而今天对于我们来说，a[i]其实已经很普遍和常用了，所以也没有人提这是语法糖这回事了。因为终极来说，所有语言都是汇编语言的语法糖：）

简单说，JSX是一种更简便书写javascript的方式
由于DOM结构被我们写到了javascript文件里，由javascript来生成DOM结构
如果一直使用javascript来写DOM结构，那么render函数里就是一堆React.createElement
这样既不美观也不实用。

但是我们必须知道，JSX本质上就是javascript
在编译的时候，会由babel将JSX转化为javascript。

比如


    222
      333

生成了

"use strict";

React.createElement("div", {
  className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

比如

function Comp(){
    return test
}

222

生成

"use strict";

function Comp() {
  return React.createElement("div", {
    className: "test"
  }, "test");
}

React.createElement(Comp, {
  className: "test2"
}, "222");

了解JSX的本质，只需要记住：JSX本质就是javascript

附录

babel提供的一个在线转换JSX为javascript的地址
https://babeljs.io/repl/

GPU云服务器云服务器转化为对象声明转化为引用图片转化为文字 js文本转化为语音

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109432.html

基于 JSX 的动态数据绑定

摘要：基于的动态数据绑定归属于笔者的与前端工程化实践中的，本文中设计的引用资料参考学习与实践资料索引，如果有对基础语法尚存疑惑的可以参阅现代开发语法基础与实践技巧。基于 JSX 的动态数据绑定归属于笔者的 React 与前端工程化实践中的，本文中设计的引用资料参考 React 学习与实践资料索引，如果有对 JavaScript 基础语法尚存疑惑的可以参阅现代 JavaScript 开发：语...

Sleepy 2019-08-20 18:32 评论0 收藏0
精益 React 学习指南（Lean React）- 1.2 JSX 语法

摘要：需要提醒读者的是，的很多例子都是通过来写的，但这并不是语法，后面我们会有单独的一小节讲解的基本语法，不过目前为止我们先将跟多精力放在上。书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...

moven_j 2019-08-02 15:54 评论0 收藏0
虚拟DOM内部是如何工作的

摘要：但是它与里大部分的概率是保持一致的。但是如何将转换成函数的调用呢就是干这件事情的。好了，让我们看看是如何工作的。下面的图片在流程图中高亮了一个组件是如何工作的最后希望这篇文章能帮助你理解是如何工作的至少在中英文原文链接 Virtual DOM很神奇，同时也比较复杂，难以理解。react,preact和相似的js库都使用了virtual dom。然而，我找不到任何好的文章或者文档，可以...

hiYoHoo 2019-08-21 11:46 评论0 收藏0
React 单文件组件的解决方案 Omil 和 Omi Snippets

摘要：属性我们还可以使用来书写样式，它会自动帮我们编译为格式内容语法高亮建议使用配合该扩展支持语法高亮扩展开发项目，当然你可以把文件当作对待。 Omil 是什么？ Omil是一个 webpack 的 loader，它允许你以一种名为单文件组件(SFCs)的格式撰写 Omi 组件： ${this.data.title} export default class { test(){...

lowett 2019-08-26 10:10 评论0 收藏0