本文为系列文章：

手写虚拟DOM（一）—— VirtualDOM介绍
 手写虚拟DOM（二）—— VirtualDOM Diff
手写虚拟DOM（三）—— Diff算法优化
 手写虚拟DOM（四）—— 进一步提升Diff效率之关键字Key
手写虚拟DOM（五）—— 自定义组件
 手写虚拟DOM（六）—— 事件处理
 手写虚拟DOM（七）—— 异步更新

一、前言

本文继续上一节的Virtual DOM Diff，来聊一聊：
在渲染数组元素的时候，编译器会提醒加上key这个属性，那么key是用来做什么的呢？

二、key的作用

在渲染数组元素时，它们一般都有相同的结构，只是内容有些不同而已，比如：

<ul>
    <li>
        <span>商品：苹果</span>
        <span>数量：1</span>
    </li>
    <li>
        <span>商品：香蕉</span>
        <span>数量：2</span>
    </li>
    <li>
        <span>商品：雪梨</span>
        <span>数量：3</span>
    </li>
</ul>

可以把这个例子想象成一个购物车。此时如果想往购物车里面添加一件商品，性能不会有任何问题，因为只是简单的在ul的末尾追加元素，前面的元素都不需要更新：

<ul>
    <li>
        <span>商品：苹果</span>
        <span>数量：1</span>
    </li>
    <li>
        <span>商品：香蕉</span>
        <span>数量：2</span>
    </li>
    <li>
        <span>商品：雪梨</span>
        <span>数量：3</span>
    </li>
     <li>
        <span>商品：橙子</span>
        <span>数量：2</span>
    </li>
</ul>

但是，如果我要删除第一个元素，根据VD的比较逻辑，后面的元素全部都要进行更新的操作。dom结构简单还好说，如果是一个复杂的结构，那页面渲染的性能将会受到很大的影响。

<ul>
    <li>
        <span>商品：香蕉</span>
        <span>数量：2</span>
    </li>
    <li>
        <span>商品：雪梨</span>
        <span>数量：3</span>
    </li>
     <li>
        <span>商品：橙子</span>
        <span>数量：2</span>
    </li>
</ul>

最直观的方法肯定是直接删除第一个元素然后其它元素保持不变了。

但程序没有这么智能，可以像我们一样一眼就看出变化。程序能做到的是尽量少的修改元素，通过移动元素而不是修改元素来达到更新的目的。为了告诉程序要怎么移动元素，我们必须给每个元素加上一个唯一标识，也就是key。

<ul>
    <li key="apple">
        <span>商品：苹果</span>
        <span>数量：1</span>
    </li>
    <li key="banana">
        <span>商品：香蕉</span>
        <span>数量：2</span>
    </li>
    <li key="pear">
        <span>商品：雪梨</span>
        <span>数量：3</span>
    </li>
    <li key="orange">
        <span>商品：橙子</span>
        <span>数量：2</span>
    </li>
</ul>

当把苹果删掉的时候，Virtual DOM里面第一个元素是香蕉，而实际dom里面第一个元素是苹果。
当元素有key属性的时候，框架就会尝试根据这个key去找对应的元素，找到了就将这个元素移动到第一个位置，循环往复。
最后Virtual DOM里面没有第四个元素了，才会把苹果从dom移除。

三、代码实现

在上一个版本代码的基础上，主要的改动点是diffChildren这个函数。原来的实现很简单，递归的调用diff就可以了：

function diffChildren(vdom, element) {
    const nodes = element.childNodes || [];
    const children = vdom.children || [];

    const hasKeys = {};
    let noKeys = [];

    // 根据是否有key先进行分组
    nodes.forEach(node => {
        const props = node['props'];
        if (props && props.key !== undefined) {
            hasKeys[props.key] = node;
        } else {
            noKeys.push(node);
        }
    });

    // 遍历vdom
    children.forEach((child, index) => {
        let dom;
        const key = child.props && child.props.key !== undefined ? child.props.key : undefined;
        if (key != null && hasKeys[key]) {
            dom = hasKeys[key];
            delete hasKeys[key];
        } else {
            for (let i = 0; i < noKeys.length; i ++) {
                const node = noKeys[i];
                if (isEqual(child, node)) {
                    dom = node;
                    noKeys.splice(i, 1);
                    break;
                }
            }
        }

        const isUpdate = diff(dom, child, element);
        if (isUpdate) {
            // 更新（移动），则移到当前元素的位置，当前元素向后延一位
            const origin = nodes[index];
            if (origin !== child) {
                element.insertBefore(dom, origin);
            }
        }
    });

    // 移除不在新的vdom中的节点
    const list = Object.keys(hasKeys);
    if (list.length > 0) {
        list.forEach(key => {
            element.removeChild(hasKeys[key]);
        });
    }
    if (noKeys.length > 0) {
        noKeys.forEach(node => {
            element.removeChild(node);
        });
    }
}

主要是以下几个步骤：

将所有dom子元素分为有key和没key两组
遍历VD子元素：
- 如果VD子元素有key，则去查找有key的分组；
- 如果没key，则去没key的分组找一个类型相同的元素出来；
diff一下，得出是否更新元素的类型
如果是更新元素且子元素不是原来的，则移动元素
最后清理删除没用上的dom子元素

diff也要改造一下，如果是新建、删除或者替换元素，返回false。更新元素则返回true：

function diff(srcDOM, destDOM, parent) {
    // 原dom没有，新vdom有，则表明是新增节点
    if (srcDOM === undefined) {
        parent.appendChild(createElement(destDOM));
        return false;
    }

    // 原dom有，新vdom没有，则表明是移除节点
    if (destDOM === undefined) {
        parent.removeChild(srcDOM);
        return false;
    }

    // 新老节点（类型不同 or tag不同 or 内容不同），则表明是替换节点
    if (!isEqual(destDOM, srcDOM)) {
        parent.replaceChild(createElement(destDOM), srcDOM);
        return false;
    }

    // 至此，只有可能是当前vdom的自身props变化 or 其children发生变化
    if (srcDOM.nodeType === Node.ELEMENT_NODE) {
        diffProps(destDOM.props, srcDOM);
        diffChildren(destDOM, srcDOM);
    }
    return true;
}

为了看效果，view函数也要改造下：

const state = {
    list: []
};

function add(key) {
    let index = -1;
    for (let i = 0; i < state.list.length; i ++) {
        const param = state.list[i];
        if (param.id === key) {
            index = i;
            break;
        }
    }

    if (index === -1) {
        state.list.push({
            id: key,
            number: 1
        });
    } else {
        state.list[index].number ++;
    }
    render(root);
}

function del(key) {
    for (let i = 0; i < state.list.length; i ++) {
        const param = state.list[i];
        if (param.id === key) {
            state.list.splice(i, 1);
            break;
        }
    }
    render(root);
}

// 根据 state.number 来计算有多少个 div
function view() {
    const goods = [];
    for (let i = 0; i < 5; i ++) {
        goods.push(
            <span class="goods" onClick={"add(" + i + ")"} key={i}>商品{i+1}</span>
        )
    }

    const car = [];
    state.list.forEach(item => {
        car.push(
            <li key={item.id} onClick={"del(" + item.id + ")"}>
                <span>商品：{item.id}....</span>
                <span>数量：{item.number}</span>
            </li>
        )
    });

    return (
        <div data-list={state.list.length}>
            <div>{goods}</div>
            <ul>{car}</ul>
        </div>
    );
}