zoukankan      html  css  js  c++  java
  • 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 这种靠谱。

  • 相关阅读:
    Unity—Json2
    Unity—Json1
    windows 命令行报错:file(s) not in client view
    winform listbox 使用DrawMode使用OwnerDrawVarialbe或OwnerDrawFixed无水平滚动条
    windows 命令行使用p4
    winform listbox增加鼠标双击事件
    lua5.3+luasocket
    centos 安装glide工具(golang)笔记
    centos 安装golang笔记
    centos安装redis,并设置开机自动启动项
  • 原文地址:https://www.cnblogs.com/ZweiZhao/p/9820103.html
Copyright © 2011-2022 走看看