具体来说，他们来看一看 React 在世界覆盖范围的关注度态势，右图是关键字“楼价”和“React”在 Google Trends 上的搜寻量对照，黄色的是 React，黄色的是楼价，很显著，人类文明对 React
palio！怎样download专业课程
从这些统计数据中，他们能窥见甚么？能很显著的窥见，我在直截了当的说实话。
从2014年到现在，React、jQuery和 Angular 的关注度态势对照，能很显著的看见（左图），React 在亚洲地区的关注度态势增长十分快。
度也早已迫近 nodejs。
了业内的最前沿！
所以React究竟是甚么鬼？
提及官方中文网站的概要，”一个用以构筑界面的javascript库”。
React 源于 Facebook 的外部工程项目，因为 FB 对市场上大部份 JavaScript MVC 架构，都不令人满意，就下定决心自己写两套，用以铺设 Instagram 的中文网站。做出以后，辨认出这套小东西较好用，就在2013年5月开放源码了。
由于 React 的结构设计商业价值观极为独有，归属于颠覆性创新，性
和 Backbone、Angular 等 MV*架构不那样，它只处置 View 方法论，它只处置 View 方法论，它只处置 View 方法论。所以如果你讨厌它，你能很难的将它网络连接到原有工程建设中，接着用 React 改写 HTML 部份方可，不必修正方法论。
近些年 web 应用领域的技术升级十分快速，React也是几项新技术…话说React出也早已2年了，只不过并算不得新技术了，只是在亚洲地区还没有普及化开，这首诗的目地也是协助他们更慢的认知 react 和重新认识 react 能给他们增添的商业价值。
React 这么火，所以它究竟有甚么牛逼的地方？
左图是2015年年初的统计数据
这是 Facebook 的好友动态页面，也是 Facebook 访问量最大的页面没有之一，通过 Chrome React 插件能看见
前面给他们来了一波前戏，相信他们早已有点迫不及待了，所以，进入正题：具体来说，先跟他们描述下 React 最特别的部份，听完这部份他们基本就能够在脑海里建立起一个 React 的大致印象。
接着是 React 的核心内容，听完这部份他们待会回去就能开始写代码接着今天晚上发布上线了。最后是 React 能够给他们实际增添的商业价值，他们不作无意义的代码重构。
具体来说，他们来看JSX——
JSX 使用的是预编译模板，React 提供了一个预编译工具，叫 react-tools，能通过 npm 命令安装，一般是在开发时期运行，运行后它会启动一个监听程序，实时监听 JSX 源码的修正，接着自动编译为 JS 代码。
他们留意下，render()方法里的被编译成了 React.createElement()，它这么做，目地就是为了实现虚拟 DOM。
接下来他们来了解 React 最大的亮点————虚拟 DOM。
传统 web app 和 DOM 直接交互，由App来控制DOM的构筑和渲染、元素属性的读写、事件的注册和销毁等等。当新产品刚上线的时候，这种做法看起来也挺好。但随着产品功能越来越丰富、代码量越来越多、开发团队人员越来越多—————
一年后
你的代码可能会变成这样。
当然，合理的代码规划能够避免这类问题，但团队里难免会有擅长屠宰式编程的同学，分分钟把你代码改的面目全非。
这时，React的虚拟DOM和单项统计数据流就能较好的解决这个问题。
虚拟DOM则是在DOM的基础上建立了一个抽象层，他们对统计数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。
虚拟DOM会使得App只关心统计数据和组件的执行结果，中间产生的DOM操作不需要App干预，而且通过虚拟DOM来生成DOM，会有几项十分可观收益——-性能。
大部份人都知道DOM慢，渲染一个空的DIV，浏览器需要为这个DIV生成几百个属性，而虚拟DOM只有6个，所以减少不必要的重排重绘以及DOM读写能够对页面渲染性能有大幅提升。
所以他们来看一看虚拟DOM是怎么做的：React会在内存中维护一个虚拟DOM树，当他们对这个树进行读或写的时候，实际上是对虚拟DOM进行的。当统计数据变化时，接着React会自动更新虚拟DOM，接着拿新的虚拟DOM和旧的虚拟DOM进行对照，找到有变更的部份，得出一个Patch，接着将这个Patch放到一个队列里，最终批量更新这些Patch到DOM中。
这样的机制能保证即便是根节点统计数据的变化，最终表现在DOM上的修正也只是受这个统计数据影响的部份，能保证十分高效的渲染。
但这样也是有一定的缺陷的——首次渲染大量DOM时因为多了一层虚拟DOM的计算，会比innerHTML插入方式慢，所以使用时需要确保不要一次性渲染大量DOM。
几个UI组件的渲染性能对照
http://mathieuancelin.github.io/js-repaint-perfs/
一个最基本的 React 组件由统计数据和JSX两个主要部份构成，他们先来看一看数据。
这是一个简单单完整的React组件【类】，细节他们先不必太在意细节，了解机制就能。
控制组件的表现，用以存放会随着交互变化状态，比如开关状态等。
JSX 做的事情就是根据 state 和 props 中的值，结合一些视图层面的方法论，输出对应的 DOM 结构。
前面他们知道了一个简单的组件的构成，但单个的组件肯定不能满足实际需求，他们需要做的是将这些独立的组件进行组装，同时找出共性的部份进行复用。
比如这样一个场景
他们以这样一个界面为例，能窥见，里面的
都是最细粒度的组件，是能复用的。具体来说，他们来看下Article的代码——这个就是他们分解出的 Article 组件，它需要2个属性，article对象和showImage。article对象包含图片、地址、标题、描述信息，showImage是一个布尔类型，用以判断是否需要显示成一个图片。
这个组件本身的实现能很简单也能很复杂，但使用者可不关心你的外部实现，使用者关心的是组件需要甚么参数就能了。
外国人的组件化商业价值观比他们亚洲地区的普及化程度高很多，不只局限于软件开发，包括实体行业的咖啡机、加油站、儿童摇摇车都有这种结构设计商业价值观在里面。
希望他们在结构设计模块的时候，也尽可能将组件方法论对外透明，来减少维护成本。
他们留意一下标虚线的部份，这里复用了 Article 组件。这时的 Article 组件看起来就是一个普通的标签而已，简单吧。
这个是热问组件，也复用了 Article 组件。这就是 React 如丝般顺滑的组件复合。
这个，叫做竹笕，是中日传统禅文化中常见的庭院装饰品，它的构造可简单可复杂，但原理很简单，比如这个竹笕，水从竹笕顶部入口流入外部，并按照固定的顺序从上向下依次流入各个小竹筒，接着驱动水轮转动。对于强迫症患者来说，观赏竹笕的绝对是一种很享受的过程的最爱，你会辨认出这些小玩意竟然能这么流畅的协调起来，好神奇。
如果竹笕是一个组件的话，所以水就是组件的统计数据流。
在React中，统计数据流是自上而下单向的从父节点传递到子节点，所以
这个是前面看见的 Article 题组件，拥有一个叫做 articles 的属性。
props永远是只读的。
组件的属性类型如果不进行声明和验证，所以很可能使用者传给你的属性值或者类型是无效的，那会导致一些意料之外的故障。好在React早已为他们提供了两套十分简单好用的属性校验机制——
React有一个PropTypes属性校验工具，经过简单的配置方可。当使用者传入的参数不满足校验规则时，React会给出十分详细的警告，定位问题不要太难。
PropTypes包含的校验类型包括基本类型、数组、对象、实例、枚举——
以及对象类型的深入验证等等。如果内置的验证类型不满足需求，还能通过自定义规则来验证。如果某个属性是必须的，在类型后面加上.isRequired 方可。
React的一大创新，就是把每一个组件都看成是一个状态机，组件外部通过state来维护组件状态的变化，这也是state唯一的作用。
state一般和事件一起使用，他们先看state，接着看一看state和事件怎样结合。
这是一个简单的开关组件，开关状态会以文字的形式表现在按钮的文本上。
具体来说看render方法，返回了一个button元素，给button注册了一个事件用以处置点击事件，在点击事件中对state的on字段取反，并执行 this.setState()方法设置on字段的新值。一个开关组件就完成了。
组件渲染完成后，必须有UI事件的支持才能正常工作。
React通过将事件处置器绑定到组件上来处置事件。
React事件本质上和原生JS那样，鼠标事件用以处置点击操作，表单事件用于表单元素变化等，Rreact事件的命名、行为和原生JS差不多，不那样的地方是React事件名区分大小写。
比如这段代码中，Article组件的section节点注册了一个onClick事件，点击后弹出alert。
有时候，事件的处置器需要由组件的使用者来提供，这时能通过props将事件处置器传进来。
这个是刚才那个Article组件的使用者，它提供给Article组件的props中包含了一个onClick属性，这个onClick指向这个组件自身的一个事件处置器，这样就实现了在组件外部处置事件回调。
这是一个React组件实现组件可交互所需的流程，render()输出虚拟DOM，虚拟DOM转为DOM，再在DOM上注册事件，事件触发setState()修正统计数据，在每次调用setState方法时，React会自动执行render方法来更新虚拟DOM，如果组件早已被渲染，所以还会更新到DOM中去。
这些是React目前支持的事件列表。
React的组件拥有两套清晰完整而且十分难认知的生命周期机制，大体能分为三个过程：初始化、更新和销毁，在组件生命周期中，随着组件的props或者state发生改变，它的虚拟DOM和DOM表现也将有相应的变化。
具体来说是初始化过程，这里会着重讲，需要充分认知。
，这个方法会且只会在声明组件类时调用一次，这一点需要注意，它返回的默认props由大部份实例共享。
state。
实例化之后就是渲染，componentWillMount方法会在生成虚拟DOM之前被调用，你能在这里对组件的渲染做一些准备工作，比如计算目标容器尺寸接着修正组件自身的尺寸以适应目标容器等等。
接下来就是渲染工作，在这里你会创建一个虚拟DOM用以表示组件的结构。对于一个组件来说，render 是唯一一个必须的方法。render方法需要满足这几点：
只能通过 this.props 或 this.state 访问统计数据只能出现一个顶级组件能返回 null、false 或任何 React 组件不能对 props、state 或 DOM 进行修正需要注意的是，render 方法返回的是虚拟DOM。渲染完成以后，他们可能需要对DOM做一些操作，比如截屏、上报日志、或者初始化iScroll等第三方非React插件，能在 componentDidMount()方法中做这些事情。当然，你也能在这个方法里通过 this.getDOMNode()方法取得最终生成DOM节点，接着对DOM节点做爱做的事情，但需要注意做好安全措施，不要缓存早已生成的DOM节点，因为这些DOM节点随时可能被替换掉，所以应该在每次用的时候去读取。组件被初始化完成后，它的状态会随着用户的操作、时间的推移、统计数据更新而产生变化，变化的过程是组件声明周期的另一部份——更新过程。当组件早已被实例化后，使用者调用 setProps()方法修正组件的统计数据时，组件的 componentWillReceiveProps()方法会被调用，在这里，你能对外部传入的统计数据进行一些预处置，比如从props中读取统计数据写入state。默认情况下，组件在 setState()之后，React会遍历这个组件的大部份子组件，进行“灌水”，将props从上到下一层一层传下去，并逐个执行更新操作，虽然React外部早已进行过很多的优化，这个过程并不会花费多少时间，但是程序员里永远不缺乏长期性能饥渴的同学，不必担心，React有一个能够解决你性能饥渴的办法——shouldComponentUpdate()——有时候，props发生了变化，但组件和子组件并不会因为这个props的变化而发生变化，打个比方，你有一个表单组件，你想要修正表单的name，同时你能够确信这个name不会对组件的渲染产生任何影响，所以你能直接在这个方法里return false来终止后续行为。这样就能够避免无效的虚拟DOM对照了，对性能会有显著提升。如果这个时候有同学仍然饥渴难耐，所以你能尝试不可变统计数据结构(用过mongodb的同学应该懂)。组件在更新前，React会执行componentWillUpdate()方法，这个方法类似于前面看见的 componentWillMount()方法，唯一不同的地方只是这个方法在执行的时候组件是早已渲染过的。需要注意的是，不能在这个方法中修正props或state，如果要修正，应当在 componentWillReceiveProps()中修正。接着是渲染，React会拿这次返回的虚拟DOM和缓存中的虚拟DOM进行对比，找出【最小修正点】，接着替换。更新完成后，React会调用组件的componentDidUpdate 方法，这个方法类似于前面 componentDidMount 方法，你仍然能在这里能通过 this.getDOMNode()方法取得最终的DOM节点。香港电影结尾经常看见一个剧情，就是英雄打败了坏人，接着警察出擦屁股——componentWillUnmount 除了擦屁股甚么也做不了。你能在这个方法中销毁非React组件注册的事件、插入的节点，或者一些定时器之类。这个过程可能难出错，比如绑定了事件却没销毁，这个React可帮不了你，你自己约的炮，含着泪也要打完。下面他们来看一看React怎样结合nodejs实现服务端渲染。服务端渲染有多快我就不多说了。因为有虚拟DOM的存在，React能很难的将虚拟DOM转换为字符串，这便使他们能只写一份UI代码，同时运行在node里和和浏览器里。var html = React.renderToString(elem);在node里将react组件HTML渲染为HTML，一句代码方可。不过围绕这个renderToString他们还要SON字符串中可能出现结尾标签或HTML注释，可能会导致语法错误，这里需要进行转义。页面的示例代码本来打算用他们更熟悉的HTML，但辨认出代码量太多了，所以换成了jade代码，没用过jade的同学也顺便端渲染，组件的代码前后端都能复用。是不是感觉React挺牛逼的？还没完！React能够用两套代码同时运行在浏览器和node里，而且能够以原生App的姿势运行在iOS和Android系统中，即拥有了web迭代快速的特性，又拥有原生App的体验。这个姿势叫做 React-Native。这是React和React-Native在github上的统计数据，能窥见React-Native也是相当热门——因为React-Native能够使React的商业价值最大化，这个商业价值是甚么呢——对业务来说，意味着不需要为了做终端版本就招聘和前端等量人力的终端开发，同时意味着他们成为全栈技师有了一个捷径。了解iOS开发的同学都知道，水果公司对应用上架的审核效率实在让人无力吐槽，很多团队上一个版本还没审核结束，下一个版本就早已做好了。而React-Native支持从网络拉取JS，这样iOS应用也能够像web那样实现快速迭代了。左图就是react-native的调试过程，以 iOS 为例启动 xcode build在模拟器中按下 Command + D 打开菜单，选择 Debug in Chrome在 Chrome dev tools 中调试当然，react 并不是完美的，在实际使用时你也会辨认出她的一些缺点，比如：（如果只是做安卓 app 开发，所以“苹果两件套+开发者证书”不是必须的，在windows下面开发方可。）最后，他们在使用 react 开发时，可能会需要安装React developer tools
