React 等框架使用 index 做 key 的問題

假如有兩個樹，一個是之前，一個是更變之后，我們抽象成兩種可能性。

插入內容在最后

插入內容在最前

關于插在中間，原理一樣，就不闡述。

使用 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>

對比原來的，是這樣的場景：

ul 一樣，不用重新搞

li 的 key 是 0，一樣，不用重新搞

li 的 key 是 1，一樣，不用重新搞

恩，多了一個 li，key 是 2，加上去

簡單理解來說，可以當做做了一步。

插在最前面

則應該變成這樣：

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

對比原來的，是這樣的場景：

ul 一樣，不用重新搞

li 的 key 是 0，一樣，不用重新搞

li 的 key 是 1，一樣，不用重新搞

恩，多了一個 li，key 是 2，加上去

最后就可能出現這樣的結果：

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

差不多就這個意思，所以還是使用獨立標記，比如：id 這種靠譜。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的React 等框架使用 index 做 key 的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。