【转】react和vue渲染流程对比

react的特点

1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟（虚拟dom），最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

vue的特点

MVVM框架、双向数据绑定原理，数据驱动、组件化、轻量、简洁、高效、模块友好

Virtual DoM

虚拟dom是一个什么概念呢

Vue.js(2.x)与React的其中最大一个相似之处，就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM。

DOM树的虚拟表现。它的诞生是基于这么一个概念：改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。

react的渲染流程

babel转换工具地址：http://babeljs.io/repl/

1. react中 我们用jsx来写组件，它会被babel转换成纯js，然后Preact的h函数会将这段js转换成DOM树，最后Preact的Virtual DOM算法会将virtual DOM转换成真实的DOM树，来构建我们的应用。

2. 真实的Virtual DOM会比上面的例子更复杂，但它本质上是一个嵌套着数组的原生对象。当新一项被加进去这个JavaScript对象时，一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在。

解析流程概览图

 

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

 

vue的渲染流程

Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

 

 

 

1. Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树。这个树非常轻量，它的职责就是描述当前界面所应处的状态。

2. 当我们有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。

3. 在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。

4. 当重新进行渲染之后，会生成一个新的树，将新树与旧树进行对比，就可以最终得出应施加到真实DOM上的改动。最后再通过patch函数施加改动。

对比下vue2.x官方文档

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

vue异步更新队列

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

两者相比

react和vue的相似之处：

1.使用虚拟dom

2.提供了响应式和组件化的视图组件

3.关注核心库，伴随于此，有配套的路由和负责处理全局状态管理的库

vue的优势：

1. API设计上简单，语法简单，学习成本低
2. 基于依赖追踪的观察系统，并且异步队列更新
3. 简单的语法及项目搭建 ，更快的渲染速度和更小的体积
4. 渲染性能

渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点，但Vue的Virtual DOM实现（一个陷阱的叉子）的权重要轻得多，因此比React的引入开销更少。

Vue 和 React 也提供功能性组件，这些组件因为都是没有声明，没有实例化的，因此会花费更少的开销。当这些都用于关键性能的场景时，Vue 将会更快。

5.更新性能

在react中，当一个组件的状态发生变化时，它将会引起整个组件的子树都进行重新渲染，从这个组件的根部开始。那为了避免子组件不必要的重新渲染，您需要随时使用shouldComponentUpdate，并使用不可变的数据结构。 在Vue中，组件的依赖关系在它的渲染期间被自动跟踪，因此系统准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面,vue也是快于React

6.开发中

在开发中，Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧。这是由于 React 有大量的检查机制，这会让它提供许多有用的警告和错误提示信息。vue在实现这些检查时，也更加密切地关注了性能方面。

 

react的优势

• 更适合大型应用和更好的可测试性
• Web端和移动端原生APP通吃
• 更大的生态系统，更多的支持和好用的工具（搭配的router和redux以及其中间件包含了很多重要的思想）
• 比较适合中大型项目（便于测试和后续调试）
• 是一种在内存中描述dom数状态的数据结构
• 支持在服务端渲染

原文链接：https://www.jianshu.com/p/1960f378b5b4