(三)：理解JSX和组件.pdfVIP

（三）：理解JSX和组件 原⽂：http://www .infoq .com/cn/articles/react-j sx-and-component 通过前两篇⽂章的介绍，相信⼤家对JSX和组件已经有了⼀定的了解。JSX这种 合使 ⽤JavaScript和XML 的语⾔第⼀眼看上去很“丑” ，也很神奇，但是其语法和背后的逻辑 却极其简单。相信读完本⽂你就可以对JSX和组件有⼀个全⾯的了解，并能够⽤JSX来 直观的构造⽤户界⾯。 ⽬录 什么是JSX 为什么使⽤JSX JSX 的语法 在JSX 中使⽤事件 在JSX 中使⽤样式 使⽤⾃定义组件 组件的概念和⽣命周期 使⽤ abel进⾏JSX编译 ⼩结 什么是JSX React的核⼼机制之⼀就是虚拟DOM ：可以在内存中创建的虚拟DOM元素。React利⽤ 虚拟DOM来减少对实际DOM 的操作从⽽提升性能。类似于真实的原⽣DOM ，虚拟 DOM也可以通过JavaScript来创建，例如： var child1 = React.createElement(li, null, First Text Content) var child2 = React.createElement(li, null, econd Text Content var root = React.createElement(ul, { className: my-list }, chi 使⽤这样的机制，我们完全可以⽤JavaScript构建完整的界⾯DOM树，正如我们可以 ⽤JavaScript创建真实DOM 。但这样的代码可读性并不好，于是React发明了JSX ，利 ⽤我们熟悉的HTML语法来创建虚拟DOM ： var root =( ul className=my-list liFirst Text Content/li li econd Text Content/li /ul ); 这两段代码是完全等价的，后者将XML语法直接加⼊到JavaScript代码中，让你能够 ⾼效的通过代码⽽不是模板来定义界⾯。之后JSX通过翻译器转换到纯JavaScript再由 浏览器执⾏。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript ，JSX 的 语法不会带来任何性能影响。另外，由于JSX只是⼀种语法，因此JavaScript的关键字 class, for等也不能出现在XML 中，⽽要如例⼦中所⽰，使⽤className , htmlFor代替， 这和原⽣DOM在JavaScript 中的创建也是⼀致的。 因此，JSX本⾝并不是什么⾼深的技术，可以说只是⼀个⽐较⾼级但很直观的语法 糖。它⾮常有⽤，却不是⼀个必需品，没有JSX 的React也可以正常⼯作：只要你乐意 ⽤JavaScript代码去创建这些虚拟DOM元素。 为什么使⽤JSX 前端界⾯的最基本功能在于展现数据，为此⼤多数框架都使⽤了模板引擎，例如 在AngularJS 中： div ng-if=person != null Welcome back, b{{person.firstName}} {{person.lastName}}/b ! /div div ng-if=person == null Please log in. /div 在EmberJS 中： {{#if person}} Welcome back, b{{person.firstName}} {{person.lastName}}/b ! {{else}} Please log in. {{/if}} 在Knockoutj s中： div data-bind=if: person != null Welcome back, b{{person.firstName}} {{person.lastName}}/b ! /div div data-bind=if: person == null Please log in. /div 模板可以直观的定义UI来展现Model 中的数据，你不必⼿动的去拼出⼀个很长的 HTML字符串，⼏乎每种框架都有⾃⼰的模板引擎。传统MVC框架强调界⾯展⽰逻辑 和业务逻辑的分离，因此为了应对复杂的展⽰逻辑需求，这些模板引擎⼏乎都不可避 免的需要发展成⼀门独⽴的语⾔，如上⾯代