当前位置：移动技术网 > IT编程>开发语言>JavaScript > Vue和React中的diff算法核心

Vue和React中的diff算法核心

2020年03月11日 | 移动技术网IT编程 | 我要评论

虚拟dom

js对象替代真实dom, 更改避免回流(重新渲染),一次性通过render函数渲染成真实dom
声明的样子
输出的样子

实现render函数生成真实dom

设置属性
render函数
渲染函数

diff算法

diff算法其实就是对dom进行different比较不同的一种算法(虚拟的比较更节约性能)
__ 补丁:用来更新dom的任务__

比较原则

平级对比
不跨级对比(无a__删除__a)
同级复用

遍历规则

先序深度优先遍历(从根节点向下级子节点遍历)
- 125叫广度优先
- 12345深度优先

实现diff函数

比较思路规则
- 1. type相同,比较属性,属性不同生成补丁包patch{type:'attrs',attrs:{class:'xx'} }
  2. 新节点在原dom中不存在{type:'remove',index:xxx}
  3. 节点类型不同,直接替换{type:'replace',newnode:xxx}
  4. 文本变化{type:'text',text:'xxx'}

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]