关于 JSX 的3个“大问题”
- JSX 的本质是什么，它和 JS 之间到底是什么关系？
- 为什么要用 JSX？不用会有什么后果？
- JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？
大多数人只是简单地把它理解为模板语法的一种
JSX 作为 React 框架的一大特色
它与 React 本身的运作机制之间存在着千丝万缕的联系
带你由表及里地起底 JSX 相关的底层原理
帮助你吃透这层“联系”
建立起强大的理论自信
JSX 的本质：JavaScript 的语法扩展
JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。
JSX 语法是如果在 JavaScript 中生效的？
认识 Babel
Facebook 公司给 JSX 的定位是 JavaScript 的扩展，所以浏览器并不会天然支持他。
JSX 会被编译为 React.createElement()，将返回一个叫作 React Element 的 JS 对象。
什么是 Babel？
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转化为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
React 选用 JSX 语法的动机
既然 JSX 等价于一次 React.createElement 调用，那么 React 官方为什么不直接引导我们用 React.createElement 来创建元素呢？
JSX 语法糖允许前端开发者
使用我们最为熟悉的类 HTML 标签语法来创建虚拟 DOM
在降低学习成本的同时，也提升了研发效率与研发体验
入参解读：创建一个元素需要知道哪些信息
@param type 用于标识节点的类型，如 div、h2
@param config 以对象形式传入，组件所有的属性都会以键值对的形式存储在 config 对象中
@param children 以对象形式传入，它记录的是组件标签之间嵌套的内容
export function createElement(type, config, children)
createElement 函数体拆解
React.createElement
-> 二次处理 key、ref、self、source 四个属性值
-> 遍历 config，筛选出可以提进 props 里的属性
-> 提取子元素，推入 childArray 数组
-> 格式化 defaultProps
-> 结果以上数据作为入参，发起 ReactElement 调用
出参解读：初识虚拟 DOM
ReactDOM.render(
// 需要渲染的元素(ReactEelement)
element,
// 元素挂载的目标容器（一个真实 DOM）
container,
// 回调函数，可选参数，可以用来处理渲染结束后的逻辑
[callback]
)
经此函数渲染处理后
-> 真实 DOM
总结
开发者
-- 编写 -> JSX 代码
-- Babel 编译 -> React.createElement 调用
-- 返回 -> ReactElement 调用 -> 虚拟 DOM
-- 作为参数传入 -> ReactDOM.render()
-- 渲染处理 -> 真实 DOM
一个 React 组件是如何走完自己的一生？又及时的实现“自我更新”的呢？，下一章节见分晓。
