本文旨在真正吃透 React 知识链路与底层逻辑

1. 深入浅出 React

1.1 JSX 底层原理

关于 JSX 的 3 个大问题

• 1. JSX 的本质是什么，它和 JS 之间到底是什么关系？
• 2. 为什么使用 JSX？ 不用会有什么后果？
• 3. JSX 背后的功能模块是什么？ 这个功能模块都做哪些事情？

---

JSX 本质

• JSX 是 JS 的一种语法扩展，它和模板语言很接近，但是它充分具备 JS 的能力

JSX 语法是如何在 JS 中生效的？

• JSX 会被编译成 React.createElement()，React.createElement() 会返回一个叫做 React Element 的 JS 对象，其中编译的动作是由 Babel 完成的。

什么是 Babel ?

• 主要用于将高版本的 JS 代码转为向后兼容的 JS代码，从而能让我们的代码运行在更低版本的浏览器或者其他的环境中。

• 比如我们在代码中使用了 ES6 箭头函数：

// Babel 编译前的代码
var fn = (num) => num + 2;

但如果用低版本浏览器运行的话会出现报错；但是经过 Babel 编译之后的代码就可以运行在低版本的浏览器中了

// Babel 编译后的代码
var fn = function fn(num) {
  return num + 2;
}

React 选用 JSX 语法的动机

• JSX 语法糖允许前端开发者使用最为熟悉的类 HTML 标签语法来创建虚拟 DOM，在降低学习成本的同时，也提升了研发效率与研发体验

TO BE CONTINUE...