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。

比如

<div className="aaa">
    <span>222</span>
      <span>333</span>
</div>

生成了

"use strict";

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

比如

function Comp(){
    return <div className='test'>test</div>
}

<Comp className="test2">222</Comp>

生成

"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 <Comp attr1=xxx attr2=yyy>text</Comp>
    }
}

了解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 <compConponent ...obj>text</compConponent>
    }
}

看到这里要问了，这不是变复杂了么
表面上看，是变复杂了。但是如果在一个比较复杂的项目中，你拥有了可以批量生成组件的能力。
比如生成一个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 (  
        <>  
            <Form>  
                {list.map(item =>  
                    (  
                        <item.type label={item.label} key={item.id}></item.type>  
                    )  
                }  
            </Form>  
        </>  
    )  
}  

所有的JSX在我们眼中，都不再是HTML，而是**变量**
用JSX，只是换了一种更直观的方式写js生成的html而已

附录

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