前端面试宝典之React-1-JSX

React 教程总是从 JSX 开始，而 JSX语法 过一下官方文档就会了，因为本来设计就是 类HTML 语法

✨ 我们前期需要重点理解 React 如何把 JSX 变为浏览器识别的 HTML 的总体流程即可

具体细节与 React 真正做的事情相比不重要，更偏向编译原理

JSX

JSX 会被编译为 React.creatElement()
React.creatElement() 返回一个叫做 ReactElement 的 JS 对象

编译交由 Babel 处理

Babel：转译 JSX语法 --> 带有很多参数的JS函数调用

👇 参数如下：

👇 React.creatElement() 就是处理这些标签语法中用的内容 props、子节点关系，如：

容易有的误区：creatElement() 没有复杂算法、也没有创建或操作DOM

React.creatElement() 是个纯粹的参数转换器，一个数据处理层

Babel 转译后的代码(函数调用) 并未执行

而执行后得到的内容就是 ReactElement 对象，虚拟DOM！！！

这个对象就是虚拟DOM，老生常谈不细说，就是 JS对象描述真实DOM

在 React 环境中，可以直接打印出虚拟DOM

const Jsx = (<div>
  <h1>i am title</h1>
  <p>i am the content</p>
</div>
)

console.log(Jsx)

和 Vue 中打印出来 组件Ref 类似，都是 虚拟DOM

到这里我们发现 JSX 内容链路只到了 虚拟DOM，并没有到 真实DOM 渲染

没错，JSX 的知识里，到 虚拟DOM( ReactElement JS对象) 就结束了

虚拟DOM 转 真实DOM，因为功能独立，一般作为单独的功能及知识

ReactDom.render()