React与Vue

React是什么？有何特性

是什么？

React是javascript的UI库，通过组件化的方式解决视图层开发复用问题，本质是组件化框架。

特性

• 独立架构
  React 是 MVC 中的 V，把数据变成 DOM 显示出来，它只关注表现层。自带的 View 和 Controller 库，在实现应用时，不需要任何其他的库也可以自运行。
• 函数式编程
  因为 React 组件本身就是纯函数。React 的 createElement 方法保证了组件是纯净的，即传入指定 props 得到一定的 Virtual DOM ，整个过程都是可预测的
• 组件化开发模式
  构建可以管理自身状态的封装组件，然后对其组合以构成更复杂的UI
• JSX 语法
  React 为了方便 View 层组件开发模式，承载了构建 HTML 结构化页面的职责，通过 JSX 处理数据和 DOM 之间的关系，而不需要直接操作 DOM。
• 虚拟DOM React 中，在基建层会统一把我们的编写的代码先编译成 JavaScript 对象树，存在内存里，然后再进一步映射成真实DOM。每次数据更新后，重新计算 Virtual DOM，并和上一次生成的 Virtual DOM 做对比（diff），对发生变化的部分做批量更新，减少低效操作。 React 也提供了直观的 shouldComponentUpdate 生命周期回调，让开发者可以自行控制组件刷新。

React与Vue有何异同？

不同点

• 核心思想不同

  • Vue采用灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。
  • React聚焦函数式编程（纯组件），数据不可变以及单向数据流,需要双向的地方只能手动实现。

• 组件写法不同/语法不同

  • React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js;
  • Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件（Vue也支持JSX写法）。

• diff算法不同

  • Vue进行diff时，调用patch打补丁函数，一边比较一边给真实的DOM打补丁；react则没有；
  • Vue对比节点，当节点元素类型相同，但是className不同时，认为是不同类型的元素，删除重新创建；而react则认为是同类型节点，进行修改操作；
  • Vue的列表比对，采用从两端到中间的方式，旧集合和新集合两端各存在两个指针，两两进行比较，如果匹配上了就按照新集合去调整旧集合，每次对比结束后，指针向队列中间移动；而react则是从左往右依次对比，利用元素的index和标识lastIndex进行比较，如果满足index < lastIndex就移动元素，删除和添加则各自按照规则调整；
  • 当一个集合把最后一个节点移动到最前面，react会把前面的节点依次向后移动，而Vue只会把最后一个节点放在最前面。

• 设计模式不同

  • React本身，是严格的view层，MVC模式
  • Vue是MVVM模式的一种实现。

• 使用场景不同

  • 在构建大型复杂应用项目中，React坚持的数据不可变及单向数据流思想比Vue更具优势，因为透明度和可测试性在大型项目中变得至关重要
  • React是严格的view层，架构是独立的，可以同时适用于web和原生开发;而Vue包含mvvm各层，不具备这种独立性，仅可适用于web项目开发.

相同点

• 数据驱动视图
  两者都采用数据驱动视图方式，隐藏操作DOM的频繁操作。所以我们在开发时，只需要关注数据变化即可
• 组件化
  React与Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一些细块，这些块就是组件，组件之间的组合嵌套就形成最后的网页界面。
• 虚拟DOM
  Vue与React都使用了 Virtual DOM + Diff算法， 不管是Vue的Template模板+options api写法， 还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)。 当每一次UI更新时，总会根据render重新生成最新的VNode，然后跟以前缓存起来老的VNode进行比对，再使用Diff算法（框架核心）去真正更新真实DOM。