React前端开发入门与实战-CSDN博客

React是Facebook开发的一款JS库，那么Facebook为什么要建造React呢，主要为了解决什么问题，通过这个又是如何解决的？

从这几个问题出发我就在网上搜查了一下，有这样的解释。

Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。

解决这个问题需要“以某种方式组织代码，使其更加可预测”，这通过他们(Facebook)提出的Flux和React已经完成。

React是Facrbook内部的一个JavaScript类库，已于1年开源，可用于创建Web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了——这种老舅的方式既不具备扩展性，又很难加入新的功能，就算可以，也是有着冒着很大的风险。React使用很新颖的方式解决了这些问题。你只需要声明地定义各个时间点的用户界面，而无序关系在数据变化时，需要更新哪一部分DOM。在任何时间点，React都能以最小的DOM修改来更新整个应用程序。

React引入了一些激动人心的新概念，向现有的一些最佳实践发起了挑战。学习这些概念，将帮助你理解它们的优势，创建具备高扩展性的单页面应用（SPA）。React把主要的注意力放在了应用的“视图”部分，没有限定与服务端交互和代码组织的方式。

React好在哪里呢?个人意见有两点：

虚拟DOM —— 在DOM树的状态需要发生变化时，虚拟DOM机制会将同一Event loop前后的DOM树进行对比（自然通过一系列高效的算法），如果俩个DOM树存在不一样的地方，那么React仅仅会针对这些不一样的区域（DOM diff）来进行响应的DOM修改，从而实现最高效的DOM操作和渲染。

如下图，我们修改了DOM树上一些节点（或UI组件）对应绑定的state（不知道state是什么没关系，后续我们会提及），React会即刻将其标记为“脏状态”，在一个Event loop结束时（即使过程中你对某个组件的state进行了多次修改），React会计算得出DOM树上需要修改的地方（“脏”了的地方，如下图红点）及其最终的状态，并仅仅针对这些地方进行一次性的重新渲染。

于是好处显而易见，并非每修改一次组件的state，就会重新渲染一次，而是在Event loop结束后做一次“秋后算账”，减少冗余的DOM操作。另外React只针对需要修改的地方来做新的渲染，而非重新渲染整个DOM树，自然效率很是不错。