为何使用react

一. 函数式编程

React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。
 开发者经过组合这些组件，最终获得功能丰富、可交互的页面。经过引入 JSX 语法，复用组件变得很是容易，
 同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了能够在浏览器
 端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。

二 虚拟DOM

DOM操做的效率是很低的，并且不是通常的慢，并且这也是引起性能问题的常见问题之一。为何会慢呢？
由于对 DOM的修改成影响网页的用户界面，重绘页面是一项昂贵的操做。太多的DOM操做会致使一系列的重
绘操做，为了确保执行结果的准确性，全部的修改操做是按顺序同步执行的。咱们称这个过程叫作回流
（reflow），同时这也是最昂贵的浏览器操做之一。回流操做主要会发生在几种状况下：

• 当对DOM节点执行新增或者删除操做时。
• 动态设置一个样式时（好比element.style.width="10px"）。
• 当获取一个必须通过计算的尺寸值时，好比访问offsetWidth、clientHeight或者其余须要通过计算的CSS值（在兼容DOM的浏览器中，能够经过getComputedStyle函数获取；在IE中，能够经过currentStyle属性获取）。 解决问题的关键，就是限制经过DOM操做所引起回流的次数。大部分浏览器都不会在JavaScript的执行过程当中更新DOM。相应的，这些浏览器将对对DOM的操做放进一个队列，并在JavaScript脚本执行完毕之后按顺序一次执行完毕。也就是说，在JavaScript执行的过程当中，用户不能和浏览器进行互动，直到一个回流操做被执行。（失控脚本对话框会触发回流操做，由于他执行了一个停止JavaScript执行的操做，此时会对用户界面进行更新）

真实页面对应一个 DOM 树。在传统页面的开发模式中，每次须要更新页面时，都要手动操做DOM进行更新。DOM 操做很是昂贵。咱们都知道在前端开发中，性能消耗最大的就是 DOM 操做，并且这部分代码会让总体项目的代码变得难以维护。React 把真实 DOM 树转换成 JavaScript 对象树，每次数据更新后，从新计算 Virtual DOM，并和上一次生成的 Virtual DOM 作对比，对发生变化的部分作批量更新。React 也提供了直观的 houldComponentUpdate 生命周期回调，来减小数据变化后没必要要的 Virtual DOM 对比过程，以保证性能。咱们说 Virtual DOM 提高了 React 的性能，但这并非 React 的惟一亮点。此外，Virtual DOM的渲染方式也比传统 DOM 操做好一些，但并不明显，由于对比 DOM 节点也是须要计算资源的。它最大的好处其实还在于方便和其余平台集成，好比 react-native 是基于 Virtual DOM 渲染出原生控件，由于 React 组件能够映射为对应的原生控件。在输出的时候，是输出 Web DOM，仍是 Android 控件，仍是 iOS 控件，就由平台自己决定了。所以，react-native 有一个口号——LearnOnce，Write Anywhere。