JSX简介

“JSX”

JSX就是Javascript和XML结合的一种格式。

React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

JSX，是一个 JavaScript 的语法扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

JSX将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。另外，由于JSX只是一种语法，因此JavaScript的关键字class, for等也不能出现在XML中，而要如例子中所示，使用className, htmlFor代替，这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM.

“JSX表示对象”

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

1 const element = (
2   <h1 className="greeting">
3     Hello, world!
4   </h1>
5 );

　等效

1 const element = React.createElement(
2   ‘h1‘,
3   {className: ‘greeting‘},
4   ‘Hello, world!‘
5 );

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

1 // 注意：这是简化过的结构
2 const element = {
3   type: ‘h1‘,
4   props: {
5     className: ‘greeting‘,
6     children: ‘Hello, world!‘
7   }
8 };

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

JSX简介

原文：https://www.cnblogs.com/liang-meng/p/11763417.html