jsx由html转为js,react源码解析：JSX如何转化为javascript

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

实战

光了解源码不行，如果能在实战里面运用到一些“只有懂源码才能使用的技巧”，那么真是装逼技巧满分。

实战场景1

假设我们需要通过单纯的数据来生成一个react组件，了解JSX源码之后，我们可以更灵活地使用

我们平常引入组件都是这样

import Comp from './Comp';

class Parent{

...

render(){

return text

}

}

了解JSX源码后，我们知道其实Comp是一个变量，attr1=xxx和attr2=yyy最后会变成一个Object变量传入React.createElement函数中

所以代码其实是可以这么写的

import Comp from './Comp';

const compConponent = Comp;

const obj = {

attr1: xxx,

attr2: yyy,

}

class Parent extends React{

...

render(){

return text

}

}

看到这里要问了，这不是变复杂了么

表面上看，是变复杂了。但是如果在一个比较复杂的项目中，你拥有了可以批量生成组件的能力。

比如生成一个antd的表单，可以通过纯json数据的方式生成

json.js

import {Input} from 'antd'

export default [

{

type: Input,

id: 'xxx',

label: '文字：'

...

}

]

component.js

import list from 'json.js'

const foo = (props) => {

return (

<>

{list.map(item =>

(

)

}

>

)

}

所有的JSX在我们眼中，都不再是HTML，而是**变量**

用JSX，只是换了一种更直观的方式写js生成的html而已

附录

babel提供的一个在线转换JSX为javascript的地址

https://babeljs.io/repl/