当前位置:Gxlcms > JavaScript > react和vue是如何渲染的?react和vue的渲染流程介绍

react和vue是如何渲染的?react和vue的渲染流程介绍

时间:2021-07-01 10:21:17 帮助过:27人阅读

本篇文章主要的介绍了关于react和vue的渲染流程,有详细的过程图,接下来就让我们一起来看这篇文章吧

react和vue的渲染流程对比

react是facebook创建的框架,它推广了虚拟dom和新的js语法----jsx,在2013年5月份进行开源,React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)

react的特点

  1. 声明式设计 −React采用声明范式,可以轻松描述应用。

  2. 高效 −React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互。

  3. 灵活 −React可以与已知的库或框架很好地配合。

  4. JSX − JSX 是 JavaScript 语法的扩展。

  5. 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中

  6. 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

Vue作者尤雨溪 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

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树,来构建我们的应用。(想看更多就到PHP中文网React参考手册栏目中学习)
2. 真实的Virtual DOM会比上面的例子更复杂,但它本质上是一个嵌套着数组的原生对象。当新一项被加进去这个JavaScript对象时,一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在。

46.png

解析流程概览图

47.png

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

vue的渲染流程

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

流程示例图

48.png

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

当我们有了这个虚拟的树之后,再交给一个patch函数,负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程中,Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。
在渲染过程中,侦测到的数据来源之后,之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。
当重新进行渲染之后,会生成一个新的树,将新树与旧树进行对比,就可以最终得出应施加到真实DOM上的改动。最后再通过patch函数施加改动。

要点可以概括为

  • 当某个数据属性被用到时,触发 getter,这个属性就会被作为依赖被 watcher 记录下来。

  • 整个函数被渲染完的时候,每一个被用到的数据属性都会被记录。

  • 相应的数据变动时,例如给它一个新的值,就会触发 setter,通知数据对象对应数据有变化。

  • 此时会通知对应的组件,其数据依赖有所改动,需要重新渲染。

  • 对应的组件再次调动渲染函数,生成 Virtual DOM,实现 DOM 更新。

本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。

以上就是react和vue是如何渲染的?react和vue的渲染流程介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行