React 等框架使用 index 做 key 的问题

React 等框架使用 index 做 key 的问题

假如有两个树，一个是之前，一个是更变之后，我们抽象成两种可能性。

1. 插入内容在最后
2. 插入内容在最前

关于插在中间，原理一样，就不阐述。

使用 ul 代表树，并且使用了 index 做 key：

<ul>
    <li key="{0}">00000</li>
    <li key="{1}">11111</li>
</ul>

先说原理

diff 树的时候，是一句一句往下的，所以是：ul -> li -> li -> ... 这样的过程，注意是对比。

插在最后

则变成这样：

<ul>
    <li key="{0}">00000</li>
    <li key="{1}">11111</li>
    <li key="{2}">22222</li>
</ul>

对比原来的，是这样的场景：

1. ul 一样，不用重新搞
2. li 的 key 是 0，一样，不用重新搞
3. li 的 key 是 1，一样，不用重新搞
4. 恩，多了一个 li，key 是 2，加上去

简单理解来说，可以当做做了一步。

插在最前面

则应该变成这样：

<ul>
    <li key="{0}">22222</li>
    <li key="{1}">00000</li>
    <li key="{2}">11111</li>
</ul>

对比原来的，是这样的场景：

1. ul 一样，不用重新搞
2. li 的 key 是 0，一样，不用重新搞
3. li 的 key 是 1，一样，不用重新搞
4. 恩，多了一个 li，key 是 2，加上去

最后就可能出现这样的结果：

<ul>
    <li key="{0}">00000</li>
    <li key="{1}">11111</li>
    <li key="{2}">11111</li>
</ul>

差不多就这个意思，所以还是使用独立标记，比如：id 这种靠谱。