首页 > itarticle > jonkjonk diff

jonkjonk diff

admin 11月 12, 2020 0

diff算法的实现

通过虚拟dom类创建创建虚拟dom，最终通过render方法将虚拟dom渲染到页面。

class Element {
	constructor(type, props, children){
		this.type = type;
		this.props = props;
		this.children = children;
	}
}

先序深度优先遍历生成补丁包patches(key值是遍历节点的顺序)。

let patches = {
	0: {type: 'ATTRS', attrs: { class: 'xxx'}},
	1: {type: 'TEXT', text: 'xxx'},
	2: {type: 'REPLACE', node: Element},
	3: {type: 'REMOVE', index: xxx}
}

patch函数更新旧dom