JSX是如何变成DOM的（深入浅出搞定REACT）

首先问三个问题吧

JSX的本质是什么？他与JS之间是什么关系？

为什么要用JSX，不用会有什么后果？

JSX背后的功能模块是什么，这个功能模块都做了哪些事情？

其实对于我学了react一段时间，对于正常的业务流，日常的数据流可以正常的使用，涉及底层原理还是不太了解，但是今天还是来讲一下JSX是如何变成JS语法，被浏览器识别渲染的吧

JSX是js的扩展语法，这就说明JSX不能直接使用，不能直接被浏览器识别读出。

首先对于react，需要了解一下什么是babel.

贴上官方文档的解释：Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中，我的理解就是将浏览器不能识别的语法，通过babel工具来进行转换为js代码

那么其实对于react底层的渲染过程，就很容易理解了。

1. 编写jsx语法，（类似于js代码，易于编写），通过babel来进行转换
2. babel将jsx代码转换为react.createElement形式来进行调用（可以在babel官网中进行查看）,接受三个参数（type("div")，config({"className":"main"}),children:("111111")）
3. react.createElemen通过调用createElement方法来进行渲染虚拟DOM
4. 虚拟DOM通过reactDOM.render（）方法来进行转换为真实DOM