今日，各种丰富精巧的网络应用层出不穷，甚至把各种功能和界面异常复杂的桌面应用都套到了了Web里，像微软现金奶牛的Office套件，是多么复杂的一种桌面应用程序，它的代码量量跟windows操作系统几乎不不相上下，这种庞然大物居然能装到Web里里面，可见近几年来Web技术的发展可谓突飞猛进。
如果没有像React 这种强大的技术框架支持，要开发这种网页应用根本就
是不不可想象的。
我们看看以前老式的多页应用是怎样的，以前的应用本质上是一堆简单页面的机械组合，开始有一个主页面，你点击链接，然后浏览器再把其他页面加载展示。这种网页应用的用户体验很差，加载新页面的时候，浏览器需要跟服务器器交互，我们作为用户往往要无奈的看着界面变成一片空白，等浏览器费尽九牛二虎之力把新页面拉下来后，老半天才像挤牛奶一样，一点一滴的把新页面慢慢显示处理。
基于这种方式，你要想开发一个网页版office，简直是异想天开，这就好像你想开一辆古董老老车在F1方程式赛道上跟舒马赫争冠军。如果你想开这种车追女生的话，那你很快能体会到有句句诗叫”寂寞空庭春欲晚“，它所表达的悲凉意境了。
2， 单页模型（SPA）
现代网页App的开发，都基於单页模型。也就是当你需要浏览不同页面时，不需要不停的向服务器请求然后加载新页面。而是把不同的页面视图展示在单一个页面中。
它的基本原理理是，要展示新页面时，客户端不再向服务器器频繁请求，而是把新页面的数据拉取下来，然后客户端根据具体情况，在本地制新的界面，然后把信息在新绘制的界面中展现出来。
这样一来，就减少了客户端与服务器的交互延迟，同时利用 本地的计算能力，客户端能绘制更加精美的界面，同时提供更及时 的响应，因此用户体验便可以大大增强。
当下最火热最强大的网页应用，都是基於单页模型的，例如google 的GMail, FaceBook, Instagram, 还有微博，twitter等。
3. 单页应用的困境
1， 单页应用难点之一是如何保持界面与数据同步变换。例如用户 点击“搜索”按钮后，拿到搜索结果，界面如何快速的转变为列表显示的方式？如何决定哪个控件该留在界面上，哪个控件该隐藏起来？拿到不同的数据，UI需要根据数据做相应变动，而这种变动需要快速而且高效。
2， 如何高效的操作DOM模型。做过web开发的同学都知道，浏览器在其内部，根据html页面，构建了一种树状结构叫DOM.要想改变页面显示，就得对dom模型进行修改，浏览器一旦察觉到dom改变了， 它会解读改变后的dom, 然后根据dom的变化重新绘制界面。但问题在于，这个过程是及其低效的
3， html页面代码过于复杂。DOM其实是一种中间语言，它是对html 页面的解析，但html模板是一种非常复杂的逻辑结构，开发人员 必须非常熟练的掌握html代码的编写，同时还得深谙javascript的 开发技术，并且还得很好的融合两者，才能开发出高效强大的页面 应用，但这种要求是一种极高的门槛，对初学者来说，学习曲线过于陡峭，同时过高的复杂性大大限制了应用的开发，要想开发出 强大的网页应用，无论是设计上的难度，逻辑上的错综复杂，还是 工程量上的庞大，这些都是阻碍Web开发的重重障碍。
React 救驾来迟
我记得以前最喜欢看的武打片有这么一句：臣救驾来迟，请皇上赎罪。我也想跟大家说一声，臣携React救驾来迟,请诸位皇上谢罪。 React 的诞生就是要解决我们前面提到的种种困难的。
自动化的UI管理对於单页App 而言，自动化的UI管理，也就是让界面状态跟显示数据的变化保持同步，是一件很困难的事情。但在React框架下，它在 数据和界面间，构造了一个粘合层，把数据的变化转成一系列事件，开发者只需要根据事件转换界面状态，这就大大缓解了数据和界面间的逻辑耦合度，极大的降低了两者维持状态一致性的技术难度。
更快的DOM操作
由于DOM操作的效率及其低下，React 为了提升效率，在内存中， 构建了一颗虚拟DOM, 由于虚拟DOM在内存中，对虚拟DOM的操作， 速度都会很快，React会把对虚拟DOM的操作全部缓存起来，在合适的时间，React 会把所将虚拟DOM与浏览器内部的DOM模型进行比较，找出变更的部分，然后一次性把变更的部分提交到浏览器的DOM 中，因此在React框架下，DOM的操作会变得无比高效。
UI的组件化设计 React 之所以有利于开发Web应用界面就在于，它将依赖组件化， 组合化，模块化的方式来简化复杂UI界面的设计难度。React提供 不少API，帮助构造小且可重用的UI组件，然后再提供机制 ，让我们把这些组件结合起来，形成形成复杂且功能强大的大组件 。这就很像图中的俄罗斯套娃，小的可以放入中的，中的又可以放入大的，这些套娃可以相互组合，同时每一个套娃又是独立的主体。
依赖纯JS开发web界面
了解web开发的同学或许都知道，网页界面的设计，必须由CSS来 定制。同时，如果你想实现某些特别的页面动态特效的话，你必须 编写逻辑复杂的js代码来对DOM进行操作。React 一大创新就是， 它完全摆脱了CSS的影响，让开发者直接使用js来定制界面。同时React 提供了一种非常简洁的界面定义方式叫JSX, jSX实际上 是一种语法结构，就如同大家在图片里里看到的<div></div>标签 块，它看起来像是html语法模块，但实质上不是，React 把JSX 的标签模块解读成一系列DOM操作，大家可以看看，本例中的JSX 标签模块，React 框架解读后，把它转换成一系列createElement 操作，于是JSX不但简化了UI设计的逻辑表述方式，同时也极大的减轻了开发者的编码负担，从而降低了了Web界面的设计难度，并提高了 界面的开发效率。
React 是MVC 中的V React 并不不像Angular一样，是一种完整的全面的框架，React将精力集中在处理视图层上。它的特征是将数据和UI进行结合，这意味着，在使用React框架时，我们有足够的自由度去选择其他可以处理数据层和控制层的框架。
总的来说，React框架使得开发单页App时，降低了数据和界面整合 的难度，对利用web技术开发复杂应用方面提供了巨大的推进作用。