为什么React选择JSX

一、什么React选择JSX？

React认为渲染逻辑本质上与其他UI逻辑内在耦合

• 比如UI需要绑定事件(button,a元素等等)；
• 比如UI中需要展示数据状态；
• 比如在某些状态发生改变时，有需要改变UI；

他们之间是密不可分的，所以React没有将标记分离到不同的文件中，而是将他们组合到一起，这个地方就是组件。

二、JSX是什么？

JSX是一种JavaScript的语法扩展，并且它具有JavaScript的所有特性，用于描述组件UI，也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；

JSX是“React.createElement(componnet,props,...children)”函数的语法糖，最终会被编译为React.createElement()函数调用，并返回一个“react元素”。

如图所示就是babel把JSX转换成React代码：

<div>
    <h2>{message}</h2>
</div>

"use strict";
​
/*#__PURE__*/ React.createElement(
  "div",
  null,
  /*#__PURE__*/ React.createElement("h2", null, message)
);

其实在React的开发中，并不强制要求要是使用JSX，也可以通过React.createElement来创建React组件。但是通过JSX编写组件简洁明了许多，层次清晰，更好理解。