这篇文章将为大家详细讲解有关怎么在react中实现一个虚拟dom和diff算法，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
虚拟DOM，见名知意，就是假的DOM，我们真实的DOM挂载在页面上的，而我们的虚拟DOM则是在内存中的。这个就需要我们把真实的DOM抽象成一个对象放在内存中。这个对象就可以是如下类型：
计算
安全
数据库
网络和加速
企业服务
var element = {
tagName: 'div',
props: {
class: 'box'
},
children: {
{
tagName: 'p',
props: {
class: 'p1'
},
children: ['我是p1']
},
{
tagName: 'p',
props: {
class: 'p2'
},
children: ['我是p2']
},
{
tagName: 'p',
props: {
class: 'p3'
},
children: ['我是p3']
},
}
}我们想要构造出这样的对象可以自己封装一个构造函数如下：
function Element(tagName, props, children) {
this.tagName = tagName
this.props = props
this.children = children
}有了这个对象，我们需要把这个虚拟DOM渲染到真实DOM上，可以写出如下方法：
Element.prototype.render = function () {
const { tagName, props, children } = this
var el = document.createElement(tagName)
for (key in props) {
el.setAttribute(key, props[key])
}
children.forEach((item) => {
const childEl = (item instanceof Element) ?
item.render() :
document.createTextNode(item)
el.appendChild(childEl)
})
return el
}最后我们可以new出这个对象调用render()方法然后appendChild到body中就好了:
let virtualDom = new Element('div', { class: 'box' }, [
new Element('p', { class: 'p1' }, ['我是p1']),
new Element('p', { class: 'p2' }, ['我是p2']),
new Element('p', { class: 'p3' }, ['我是p3']),
])
let a = virtualDom.render()
document.body.appendChild(a)首先我们先了解一下diff算法的作用
如果我们的虚拟dom发生了变化，我们的内存中又会产生新的虚拟DOM，如果我们直接用这个新的虚拟DOM结构的话，又会导致很多重复的渲染，因此 这个时候diff算法的作用就体现了出来，diff通过比较新旧两个虚拟DOM树，找出差异，并且记录下来，然后把记录的差异应用到真实的DOM树上。
原理：
diff算法通过对新旧两颗树进行深度优先遍历，每一个节点都加一个唯一的标识。
这个过程分为2步
找出两个树的差异，并记录在一个伪数组里。
把这些不同应用到真实的DOM树上
对于dom的操作基本可化为4种类型
对节点的删除，移动，添加子节点
更换节点标签
对于文本节点，修改节点文本
修改节点props
下面会用伪代码的形式大致过一下这个流程
// diff 函数，对比两棵树
function diff(oldTree, newTree) {
var patchs = {}; // 伪数组，记录差异
// 对4种节点做错判断
dfWork(oldTree, newTree, patchs, index)
return patchs
}
function dfWork(oldTree, newTree, patchs, index) {
let currentPatch = []
if (1) { // 对节点的删除
currentPatch.push()
} else if (3) { // 对节点的文本的更换
currentPatch.push()
} else { // 修改节点的props 对children的检查
// 对props作diff算法，把变化记录到patchs中。
currentPatch.push({ type: patch.PROPS, props: propsPatches })
// 然后需要对子节点作diff算法
diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)
}
}
function diffChildren(oldChildren, newChildren, index, patches, currentPatch) {
// 对子节点作diff算法，遍历子节点，递归调用dfWork，做差异得到patchs
}
// 把变化应用在真实的DOM树上
function patch(node, patchs) {
// node为老的DOM树，patchs变化。
// 我们会遍历这个patchs，并且把node和patch对应上，
}
function applyPatch(node, patchs) {
// 应为每个节点可能有多个变化，所以也需要遍历
switch (patchs.type) {
case REPLACE: // 节点替换
// node.render()
break;
case REORDER: // 节点的移动删除新增子节点。
break;
case PROPS:
// setProps
break;
case TEXT: // 对节点文本的修改
// node.nodeValue
break;
default:
break;
}
}关于怎么在react中实现一个虚拟dom和diff算法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
