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表示对象”

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 以及保持随时更新。

来源：博客园

作者：LiangM

链接：https://www.cnblogs.com/liang-meng/p/11763417.html