【React】初识React

React是什么

React是现在(2015年)最热门的前端技术。

在React中，一切皆组件。

A JavaScript library for building user interfaces

React仅仅是用于构建用户界面的js库(MVC中的V)，不是完整的MV*框架，所以和Angular、Backbone和Ember没有可比性。

使用jQuery操作DOM的日子也许会成为过去。

React的特点

(1) 仅仅是UI

React仅仅是MVC中的V。

(2) 虚拟DOM

React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 － 而不需要过重的浏览器DOM支持。

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

(3) 单向数据流

React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React在解决什么问题

在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而 复杂或频繁的DOM操作通常是性能瓶颈产生的原因 （如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了 虚拟DOM（Virtual DOM） 的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。