zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

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 这种靠谱。