web前端：React/JSX简介

作者:LiangM更新于： 2020-03-05 21:39:55

　　React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

　　JSX就是Javascript和XML结合的一种格式。是一个JavaScript的语法扩展。

　　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()函数调用。

　　1constelement=(

　　2

　　3Hello,world!

　　4

　　5);

　　等效

　　1constelement=React.createElement(

　　2'h1',

　　3{className:'greeting'},

　　4'Hello,world!'

　　5);

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

　　//注意：这是简化过的结构

　　constelement={

　　type:'h1',

　　props:{

　　className:'greeting',

　　children:'Hello,world!'

　　}

　　};

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

　　由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。