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/...