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 這種靠譜。