【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的。

相关文章