React之JSX学习笔记

关于JSX的3个“大问题”

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

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

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

JSX是模板语法的一种。JSX作为react框架的一大特色，它与react本身的运作机制之间存在着千丝万缕 的联系。

JSX是如何在Javascript中生效的？

JSX会被编译位React.createElement()，React.createElement()将返回一个叫做“React Element”的JS对象。

其中，JSX的编译是由babel来完成的。babel是一个工具链，主要用于将ECMAScript2015+版本的代码转换为向后兼容的Javascript语法，以便于能够运行在当前和旧版本的浏览器或者其他环境中。可以在babel官网上进行测试，查看编译前和编译后的代码：

它和JS之间到底是什么样的关系？

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

JSX是看起来像是html，其实它是React.createElement()这个Javascript调用的语法糖。

所以JSX具备Javascript的能力。

为什么React官方不直接引导我们使用React.createElement创建元素呢？

既然JSX等价于一次React.createElement调用，为什么React官方不直接引导我们使用React.createElement创建元素呢？

实现相同的功能时，JSX代码更简洁，层次更清晰，代码更方便阅读。

JSX语法糖允许前端开发着使用我们最为熟悉的类HTML标签语法来创建虚拟DOM，既降低了学习成本也提高了开发效率，所以才会使用JSX创建元素。