[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","TinyChou","page",1,"limit",20,"total","id","22475","avatar_url","https://avatars.githubusercontent.com/u/4263842?v=3","githubUsername","create_at","2016-05-08 07:51:00.623","score",10,"topic_count",0,"reply_count",2,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":34,"_31":50,"_51":52,"_25":53,"_54":55},"12331","author_id","15076","tab","share","content","目录：\r\n1. 简介\r\n1. Hello React!\r\n1. 虚拟DOM\r\n1. React组件\r\n1. 轮子来了：JSX\r\n1. 使用JSX\r\n### 简介\r\n\r\n[React](http://xc.hubwiz.com/course/552762019964049d1872fc88)是Facebook开源的一个用于构建用户界面的Javascript库，已经应用于Facebook及旗下Instagram。\r\n\r\n和庞大的[AngularJS](http://xc.hubwiz.com/course/54f3ba65e564e50cfccbad4b)不同，React专注于MVC架构中的V，即视图。这使得React很容易和开发者已有的开发栈进行融合。\r\n\r\nReact顺应了Web开发组件化的趋势。应用React时，你总是应该从UI出发抽象出不同的组件，然后像搭积木一样把它们拼装起来：\r\n\r\n![001](http://www.hubwiz.com/course/552762019964049d1872fc88/img/0001.png)\r\n\r\n不过，React定义组件的方式和AngularJS截然不同。如果说HTML是一个轮子，AngularJS 的指令/Directive则是给这个轮子镶了个金边，而React，重新造了个轮子： JSX。\r\n\r\n![ss](http://www.hubwiz.com/course/552762019964049d1872fc88/img/0002.png)\r\n\r\nReact抛弃HTML另起炉灶的原因之一是性能的考虑：DOM操作非常之慢。React引入了虚拟DOM的概念：开发者操作虚拟DOM，React在必要的时候将它们渲染到真正的 DOM上 —— 有点像游戏开发中的双缓冲区/Double Buffer帧重绘。\r\n\r\n引入虚拟DOM的另一个好处是，容易引入不同的渲染引擎。比如将你的应用代码渲染到真实的DOM，或者nodejs服务端的无头DOM，或者，iOS/Android平台组件 —— 这就是 React Native ：\r\n\r\n![a](http://www.hubwiz.com/course/552762019964049d1872fc88/img/0004.png)\r\n\r\n### Hello React!\r\n\r\n和AngularJS相比，上手React简单到让人震惊。\r\n\r\n在引入React库之后，开发API就通过React对象暴露出来了。我们要做的、能做的，就是：\r\n\r\n在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。\r\n\r\n在示例代码中使用了React对象的两个方法：\r\n\r\n* createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素\r\n参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。\r\n\r\n[**React参数props**](http://xc.hubwiz.com/course/552762019964049d1872fc88)是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。我们在示例中简单的设置为null。\r\n\r\n从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树：\r\n\r\n\t\tvar el = React.createElement(\r\n\t\t\t\"ul\",\r\n\t\t\tnull,\r\n\t\t\tReact.createElement(\"li\",null,\"China\"),\r\n\t\t\tReact.createElement(\"li\",null,\"Japan\"),\r\n\t\t\tReact.createElement(\"li\",null,\"Korea\")\r\n\t\t);\r\n \r\n上面的例子在虚拟DOM中创建了一个具有三个li子元素的ul元素，看起来有点累。不过想想，造一个轮子，总会付出一些代价的。\r\n\r\n在示例中，我们简单地传入了一个文本子元素作为p元素的内容。\r\n\r\n* render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上\r\n参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！\r\n\r\n参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法的执行改变。\r\n\r\ncallback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。\r\n\r\n虚拟DOM\r\n\r\n虚拟DOM是React的基石。\r\n\r\n之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。\r\n\r\n在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，然后再决定如何最优地更新DOM。这个过程被称为reconciliation。\r\n\r\n除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用：\r\n\r\n![react](http://www.hubwiz.com/course/552762019964049d1872fc88/img/0006.png)\r\n\r\n因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。\r\n\r\n相当棒的思路！\r\n\r\n### React组件\r\n\r\n在React中定义一个组件也是相当的容易，组件就是一个实现预定义接口的JavaScript类：\r\n\r\n* React.createClass(meta)\r\n参数meta是一个实现预定义接口的JavaScript对象，用来对React组件原型进行扩展。\r\n\r\n在meta中，至少需要实现一个render()方法，而这个方法，必须而且只能返回一个有效的React元素。\r\n\r\n这意味着，如果你的组件是由多个元素构成的，那么你必须在外边包一个顶层元素，然后返回这个顶层元素。比如我们创建一个布局组件：\r\n\r\n\t\trender:function(){\r\n\t\t\treturn React.createElement(\r\n\t\t\t\t\"div\",null,\r\n\t\t\t\tReact.createElement(\"div\",null,\"header\"),\r\n\t\t\t\tReact.createElement(\"div\",null,\"content\"),\r\n\t\t\t\tReact.createElement(\"div\",null,\"footer\")\r\n\t\t\t);\r\n\t\t}\r\n注意：你的[React组件](http://xc.hubwiz.com/course/552762019964049d1872fc88)名称的首字母应当大写，关于大小写的差异你会在后面发现。\r\n\r\n在示例代码中，我们实现了一个液晶显示组件EzLedComp（为了更逼真一些，定义了简单的样式，别忘了翻看一下），你应该会注意到div元素的样式类是用 className而不是class声明的，这是因为class 是JavaScript的保留字，渲染后，真实的DOM还会是：\r\n\r\n

Hello, React!

\r\n组件定义以后，和标准HTML标签一样，可以使用createElement()方法创建元素，只是这时，第一个参数是我们定义的组件类，而不是标签名字符串：\r\n\r\n* React.createElement(EzLedComp);\r\n### 轮子来了：\r\n\r\nReact引入虚拟DOM以后，创建DOM树得在JavaScript里写代码，这使得界面定义变得相当繁琐。比如我们创建两排的液晶组件得这么写：\r\n\r\n\t\trender: function(){\r\n\t\t\treturn React.createElement(\r\n\t\t\t\t\"div\",null,\r\n\t\t\t\tReact.createElement(\"div\",{className:\"ez-led\"},\"Hello, React!\"),\r\n\t\t\t\tReact.createElement(\"div\",{className:\"ez-led\"},\"2015-04-15\")\r\n\t\t\t);\r\n\t\t}\r\n而它们被渲染后对应的声明式HTML则简单明了：\r\n\r\n\t\t

\r\n\t\t

Hello, React!

\r\n\t\t

2015-04-15

\r\n\t\t

\r\n这还只是两层的树，要是需要一棵大树呢？\r\n\r\n![zz](http://www.hubwiz.com/course/552762019964049d1872fc88/img/0005.png)\r\n\r\n填一个坑，需要挖另一个坑。于是，JSX来了。\r\n\r\nJSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素。简单的说，每当你需要使用createElement()时，就把这个函数调用部分用渲染目标HTML替换（提醒下，不完全一致，比如class属性要用className代替）：\r\n\r\n\t\t//JavaScript\r\n\t\tvar e = React.createElement(\r\n\t\t\t\t\"ul\",null,\r\n\t\t\t\tReact.createElement(\"li\",null,\"China\"),\r\n\t\t\t\tReact.createElement(\"li\",null,\"Japan\"),\r\n\t\t\t);\r\n\t\t//JSX = JavaScript + XML like extension\r\n\t\tvar e =

China
Japan

;\r\n说实话，这种写法让代码看起来相当闹心。但相比写大段的脚本来创建DOM树，这至少效率高吧。好在，[React](www.hubwiz.com)不强制使用JSX，如果你是强迫症患者，确实感觉到不舒服，那么，可以不用它。\r\n\r\n### 使用JSX\r\n\r\n很显然，增加了这些XML语法的脚本不能再称为JavaScript了，使用上略有区别。\r\n\r\n* 指定脚本类型\r\n在html文件中引入的JSX脚本，需要指定类型为text/jsx：\r\n\r\n\t\t//内联脚本\r\n\t\t\r\n\t\t//外部脚本\r\n\t\t\r\n* 引入JSX语法转换库\r\n在html中使用JSX，还需要引入JSX语法转换库JSXTransform.js。这个库加载后，将在DOM树构造完成后（通过监听DOMContentLoaded事件）处理 JSX脚本：\r\n\r\n1. 搜索DOM树中的script节点，如果其类型为text/jsx则进行后续处理\r\n1. 读取script节点的内容，将其转化为JavaScript代码\r\n1. 构造一个新的script元素，设置其内容为转化结果代码，并追加到DOM树head元素中\r\nJSXTransform.js引入后通过全局对象JSXTransformer提供了API接口，我们可以使用transform()方法来模拟这个语法自动转换的过程。\r\n\r\n参考资料： [http://www.hubwiz.com/course/552762019964049d1872fc88/](http://www.hubwiz.com/course/552762019964049d1872fc88/)","title","React快速入门教程","last_reply_at","2016-05-12 01:23:56.669","good",true,"top",49,"visit_count",37360,"2015-05-22 06:48:02.827","author",{"_13":56,"_22":57},"2596887568","https://avatars3.githubusercontent.com/u/9349200?v=4"]