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

客官°小女子只卖身不卖艺 2023-06-11 06:24 10阅读 0赞

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

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关为什么选择使用 react 框架来做项目？

*主要原因**是因为前期我们交接的项目一直使用“”三无框架“”，无测试用例，无充分论证，无人维护，导致我们的项目开发效率，维护效率低；**而** react 的组件化，单...

电玩女神/ 2024年04月17日 15:33/ 0 赞/ 77 阅读

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

React 等框架使用 index 做 key 的问题假如有两个树，一个是之前，一个是更变之后，我们抽象成两种可能性。 1. 插入内容在最后 2. 插入内容在最前

客官°小女子只卖身不卖艺/ 2023年06月11日 06:24/ 0 赞/ 11 阅读

相关 mysql中key 、primary key 、unique key 与index区别

一、key与primary key区别 CREATE TABLE wh_logrecord ( logrecord_id int(11) NOT NU

阳光穿透心脏的1/2处/ 2022年06月17日 09:16/ 0 赞/ 198 阅读

相关 index和key

查看索引 mysql> show index from tblname; mysql> show keys from tblname; · Table 表的名称。 ·

曾经终败给现在/ 2022年06月06日 10:13/ 0 赞/ 427 阅读

相关 mysql中key 、primary key 、unique key 与index区别

一、key与primary key区别 CREATE TABLE wh\_logrecord ( logrecord\_id int(11) NOT NULL au

墨蓝/ 2022年06月02日 07:21/ 0 赞/ 226 阅读

相关 mysql中key 、primary key 、unique key 与index区别

索引被用来快速找出在一个列上用一特定值的行。没有索引，MySQL不得不首先以第一条记录开始并然后读完整个表直到它找出相关的行。表越大，花费时间越多。如果表对于查询的列有一个

偏执的太偏执、/ 2022年05月27日 01:40/ 0 赞/ 209 阅读

相关 mysql中key 、primary key 、unique key 与index区别

mysql中key 、primary key 、unique key 与index区别索引被用来快速找出在一个列上用一特定值的行。没有索引，MySQL不得不首先以

深藏阁楼爱情的钟/ 2022年05月14日 06:16/ 0 赞/ 235 阅读

相关 Mysql中key 、primary key 、unique key 与index区别

索引被用来快速找出在一个列上用一特定值的行。没有索引，MySQL不得不首先以第一条记录开始并然后读完整个表直到它找出相关的行。表越大，花费时间越多。如果表对于查询的列有一个

素颜马尾好姑娘i/ 2022年03月18日 09:58/ 0 赞/ 266 阅读

相关 react中key的使用

面试题: 1). react/vue中的key的作用/内部原理 2). 为什么列表的key尽量不要用index 1. 虚拟DOM的key的作用? 1).

分手后的思念是犯贱/ 2021年12月09日 06:09/ 0 赞/ 281 阅读

相关 mysql show keys,MySQL中的SHOW INDEX，SHOW INDEXES和SHOW KEYS之间的区别？

show index，show index和show key之间没有区别。它们具有相似的含义。让我们首先创建一个表-create table DemoTable1549

痛定思痛。/ 2021年09月07日 10:14/ 0 赞/ 401 阅读