React开发实例脉冲云

       React 起源于Facebook的内部项目，因为该公司对市场上所有JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。

虚拟DOM

       在传统的Web应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起DOM树的重新渲染。如果当前DOM结构较为复杂，频繁的操作很可能会引发性能问题。React为了解决这个问题，引入了虚拟DOM技术。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实DOM上，这种算法叫做DOMdiff，它可以极大提高网页的性能表现。

组件

       虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，然后像插入普通 HTML标签一样，在网页中插入这个大的组件。脉冲云整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件。

       在React中，可以按照界面模块自然划分的方式来组织和编写你的代码，一些重复使用的功能，可抽象为一个个通用的小组件，减少代码的冗余，这些通过一个个小组件构成的大组件，虽然组件由一些小的通用的组件构成，但是这些大组件关心自己部分的逻辑，彼此独立。

React认为一个组件应该具有如下特征：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

（4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

ReactDOM.render

ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。

JSX语法

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。React官方推荐使用JSX，这样组件的结构和组件之间的关系看上去更加清晰。

JSX的特点：
（1）类XML语法容易接受，结构清晰
（2）增强JS语义
（3）抽象程度高，屏蔽DOM操作，跨平台
（4）代码模块化