JSX简介

“jsx”

jsx就是javascript和xml结合的一种格式。

react发明了jsx，利用html语法来创建虚拟dom。当遇到<，jsx就当html解析，遇到{就当javascript解析。

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

jsx 仅仅只是 react.createelement(component, props, ...children) 函数的语法糖

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