Skip to content

简单diff

简单diff的思路是判断新列表的节点是否是递增的,如果不是递增的旧列表中的节点移动到新列表中节点的前一位的后面。

js
export const reactDiff = (prevVnodeList, newVnodeList) => {
    let lastIndex = 0;
    for(let i = 0; i < newVnodeList.length; i++) {
        const newVnode = newVnodeList[i];
        for(let j = 0; j < newVnodeList.length; j++) {
            const prevVnode = prevVnodeList[j];
            if(newVnode.key === prevVnode.key) {
                patchDom(prevVnode, newVnode)
                if(j >= lastIndex) {
                    lastIndex = j;
                } else {
                    parent.insertBefore(newVnode.el, newChildren[i-1].el.nextSibling)
                }
            }
        }
    }
}

双端diff