emm会用react，咱都知道react用virtual dom的形式解耦了视图层级和代码的交互操作。
既然托管了view层次的生成，react必然得提供高效的视图生成，不然如果组件之间的转换卡顿一定是所有人都受不了的。所以呢，在渲染html方面，react整了个diff算法，提升了html重新渲染的速度。
废话不多说这里先推荐两篇文章，后面写的东西基本都是对于这两篇文章的思路(图片资源也是这里扒下来的= =)。
1：从零开始实现一个React（三）：diff算法
2：React 源码剖析系列 － 不可思议的 react diff
首先咱声明以及明确以下几点。
1：react的diff算法对于新旧两颗dom树只会对同一层级的节点进行比较，如果类型不同，旧的节点将会直接删除重建即使是有跨层级移动的节点(节点内容相同，但是新的节点深度和旧节点深度不同)，也是直接删了重建，而不会进行节点移动。
2：新旧两颗树在进行比较之后并不会直接去更新旧树，而是生成一个个patch，然后执行方法根据patch去更新旧树。(在推荐的第一篇文章中由于并没有两颗virtual dom树，用的virtual dom直接和html节点比较，所以它是是直接更新了旧树)。
3：由于react的virtual dom有多种形式，原生的html element标签，自定义的component，字符串，实际上的dom比较还是比较繁琐的，为了简化代码理解，所以这里在后面的代码中默认都是同类型的标签数组。
这里定义简单一个TreeNode
export type ReactNode = {
tag: string;
attrs: null | object;
children: ReactNode[] | string[];
};
然后写diff方法，这里由于咱默认没有string类型以及component类型的节点，所以我们只需要比较当新节点的tag类型和旧节点的tag类型是否一致。不一样的就删了重新建立。
const diffNode = (preNode: ReactNode, currentNode: ReactNode) => {
const preNodeT = preNode as ReactNode;
const curNode = currentNode as ReactNode;
// tag类型不同时直接销毁原node，创建新node。
if (!preNode || preNodeT.tag.toLowerCase() !== curNode.tag.toLowerCase()) {
if (preNodeT) {
preNode = {
tag: curNode.tag,
attrs: curNode.attrs,
children: curNode.children
};
}
}
if (
(preNodeT.children && preNodeT.children.length > 0) ||
(curNode.children && curNode.children.length > 0)
) {
//关键方法是这个。
diffChildren(preNodeT, curNode.children);
}
};
关键的在同级比较以及同级节点交换的地方，我相信搜索过diff并且看过一些diff的文章的人都熟悉这么一张同级比较的图。
diff
如果用上述说的不同则删除的说法来处理同级比较的话，react diff算法就没啥好讲了，事实上，在同级计算中用key作为element的唯一标识符，在新旧node的key相同的一些情况下可以直接移动节点而不用删除再创建节点。
const diffChildren = (preChildren: ReactNode[], currentChildren: ReactNode[]) => {
const preKeyArray:string[] = preChildren.map(node => {
return node.attrs['key'];
});
if (currentChildren && currentChildren.length > 0) {
// lastIndex 作为旧树中已经比较过的节点最右的位置，当当前访问节点在旧树中的位置比之前比较过的节点都大时，
//说明这个节点并不会影响其他节点的位置，放着就好不用操作。
let lastIndex = 0;
// 新树是用来遍历的，preIndex 就是作为旧树的地址下标。
let preIndex = 0;
currentChildren.forEach((currentNode,currentIndex) => {
const currentKey = currentNode["key"];
// 新树的key同时存在于旧树
if (preKeyArray.includes(currentKey)) {
const preIndex = preKeyArray.indexOf(currentKey)
// 仅当当前旧树中的节点位置比lastIndex小的时候需要移动节点
// 因为这意味着这个节点的新位置将会破坏旧位置的顺序，所以需要进行移动
if (preIndex < lastIndex) {
moveChild(preIndex,currentIndex)
}
lastIndex = Math.max(preIndex, lastIndex);
}
// 新树的key不存在旧树的时候
else{
// 旧树同位置节点存在则删除旧节点并且创建节点
// 否则直接创建节点
if (preChildren[currentIndex]) {
lastIndex = Math.max(currentIndex, lastIndex);
removeChild(preChildren[currentIndex])
}
createChild(currentNode,preIndex);
}
// 遍历整棵树。
diffNode(preChildren[preIndex],currentChildren[currentIndex])
preIndex++;
});
// 这里注意了，在上述操作后，你是没法删除旧节点存在而新节点不存的节点的，最后遍历一遍删除。
// 上面放的那个文章1就忘了删除操作。
preChildren.forEach(item=>{
if (!currentKeyArray.includes(item.attrs['key'])) {
removeChild(item)
}
});
}
};
基本的diff大概就是这样了，虽然这里还有很多类似与removeChild，createChild之类的方法没有实现，但说实话要完全实现的话还是比较复杂的，咱也不可能真就复制一份react代码呗。而且现在react开始使用fiber结构(就是说这个方法过时了= =)，上面文章2的代码都得去react之前的release去找了...
但是(震声)！咱也不是白看的diff啊，咱至少知道了key有啥用不是。
写代码要是细一点，就该把所有的位置有可能变化的列表数据都给他添上唯一性ID，即使后台给的数据，我们也可以在获得数据的同时自己给他加一个不变的唯一性id，不加的话，这可都是新建以及销毁的开销是吧。
网友评论