JSX 代码是如何“变”成为 DOM 的？

• JSX 的本质是什么，它和 JS 之间到底是什么关系？

1. JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。
2. JSX 会被编译为 React.createElement()， React.createElement() 将返回一个叫作“React Element”的 JS 对象。
3. “编译”这个动作，是由 Babel 来完成的。通过Babel 就可以帮我们把这段代码转换为大部分低版本浏览器也能够识别的 ES5 代码。Babel 也具备将 JSX 语法转换为 JavaScript 代码的能力

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

1.  JSX 语法糖允许前端开发者使用我们最为熟悉的类 HTML 标签语法来创建虚拟 DOM，在降低学习成本的同时，也提升了研发效率与研发体验。
2. 一个页面或者组件的渲染逻辑应该与其他的UI逻辑放在一起：比如事件绑定，状态改变后渲染内容的变化
3. 在视觉上有辅助作用，同时使 React 显示更多有用的错误和警告消息。

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

1. 通过babel把 JSX 标签转化成了 React.createElement 调用

2. 通过 React.createElement 格式化数据。

3. 通过 ReactElement 把传入的参数按照一定的规范，“组装”进了 element 对象里，形成虚拟Dom

4. 通过ReactDOM.render 渲染到页面上的真实 DO。

                                                                                                                    参考修言文章