React和Vue的区别

总结：

实习呆在一家算是大型公司吧，前端技术很老旧，如今公司又很geek，即便用React框架又使用Vue，使用场景也都很深度，因此想总结一下框架的对比和传统前端技术对比又有什么好处

React和Vue的相同点

• 使用 Virtual DOM
• 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
• 将注意力集中保持在核心库，而将其余功能如路由和全局状态管理交给相关的库

框架对比Jq或其余传统前端有什么意义？ 传统前端开发所面临的痛点

问题一：复杂或频繁的 DOM 操做是性能瓶颈

前端界面开发正变得愈来愈复杂，其本质问题基本均可以归结于：如何未来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上，将变化的数据实时反应到 UI 上，这时就须要对 DOM 进行操做。而复杂或频繁的 DOM 操做一般是性能瓶颈产生的缘由（如何进行高性能的复杂 DOM 操做一般是衡量一个前端开发人员技能的重要指标）

React解决：虚拟dom

虚拟 DOM 是内存数据，性能是极高的，而对实际 DOM 进行操做的仅仅是 Diff 部分，于是能达到提升性能的目的。这样，在保证性能的同时，开发者将再也不须要关注某个数据的变化如何更新到一个或多个具体的 DOM 元素，而只须要关心在任意一个数据状态下，整个界面是如何 Render 的。任何 UI 的变化都是经过总体刷新来完成的。而 React 将这种开发模式以高性能的方式带到了前端

每作一点界面的更新，你均可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是 React 框架要完成的事情

问题二：炫酷复杂的页面UI和交互逻辑形成单页代码量巨大且耦合严重

React解决：组件化

所谓组件，即封装起来的具备独立功能的 UI 部件。React 推荐以组件的方式去从新思考 UI 构成，将 UI 上每个功能相对独立的模块定义成组件，而后将小的组件经过组合或者嵌套的方式构成大的组件，最终完成总体 UI 的构建

React 认为一个组件应该具备以下特征：

（1）可组合（Composeable）：一个组件易于和其它组件一块儿使用，或者嵌套在另外一个组件内部。若是一个组件内部建立了另外一个组件，那么说父组件拥有（own）它建立的子组件，经过这个特性，一个复杂的 UI 能够拆分红多个简单的 UI 组件；

（2）可重用（Reusable）：每一个组件都是具备独立功能的，它能够被使用在多个 UI 场景；

（3）可维护（Maintainable）：每一个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

（4）可测试（Testable）：由于每一个组件都是独立的，那么对于各个组件分别测试显然要比对于整个 UI 进行测试容易的多。

React与vue区别一：Dom-UI更新

React

在react中若是某个组件的状态发生改变，react会把此组件以及此组件的全部后代组件从新渲染，不太重新渲染并不表明会所有丢弃上一次的渲染结果，react中间仍是会经过diff去比较两次的虚拟dom最后patch到真实的dom上

如要避免没必要要的子组件的重渲染，你须要在全部可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法(只是浅比较，假设比较的类型是object，若是object仅属性发生变化，可是其引用没发生变化那么shouldComponentUpdate会认为二者之间没有任何变化)。同时你可能会须要使用不可变的数据结构（immutable，每次产生新的object，只比较hash）来使得你的组件更容易被优化。

react+mobx也能够实现依赖收集，mobx也是一种observable的实现

Vue

Vue视图更新原理：依赖收集（组件的依赖是在渲染过程当中自动追踪的，因此系统能精确知晓哪一个组件确实须要被重渲染）

总结：

引用：

https://www.infoq.cn/article/...