1. 前言

1. 为什么不能使用数组下边来作为react组件中的key
2. vue 中也有这个问题,最好自己 写个列表 删除demo,看看效果

---

2. 唯一标识

1. 在 React 中，每个组件都需要一个唯一的标识符作为 key来标识和追踪列表中的每个元素。
2. 通常情况下，我们会选择使用字符串或数字作为 key 值

---

3.不唯一问题

1. 使用数组下标作为 key 的问题在于，当列表发生变化时（例如插入、删除或重新排序），数组下标会发生变化，这可能会导致不必要的重新渲染或错误的行为。

---

可能问题

1. 不稳定的列表顺序：当列表发生变化时，组件的 key值会随之改变，
   导致React无法正确识别和跟踪每个元素的状态。
   这可能导致重新渲染整个列表，即使只有一个元素发生了变化。

2. 错误的更新行为：如果使用数组下标作为 key，而不是唯一标识符，那么当列表中的元素发生变化时，React 可能会错误地认为相同下标的元素没有发生变化，导致不正确的更新行为。

3. 重复的 key 值：如果列表中的元素不具有唯一的标识符，使用数组下标作为 key 可能会导致重复的 key 值。这可能会引发警告或错误，并导致不可预期的结果。

---

4. 示例

下标 key 数组

import React from 'react';

const ListComponent = () => {
  const items = ['Apple', 'Banana', 'Orange'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default ListComponent;

---

列表 使用下标key

import React, { useState } from 'react';
import ListComponent from './ListComponent';

const App = () => {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);

  const handleAddItem = () => {
    setItems([...items, 'Mango']);
  };

  const handleRemoveItem = () => {
    setItems(items.slice(0, -1));
  };

  return (
    <div>
      <button onClick={handleAddItem}>Add Item</button>
      <button onClick={handleRemoveItem}>Remove Item</button>
      <ListComponent />
    </div>
  );
};

export default App;

1. 我们点击 "Add Item" 按钮，将会在列表末尾添加一个新的元素。
2. 然而，当我们点击"Remove Item" 按钮时，实际上是删除列表中的最后一个元素。
3. 由于列表中的元素没有唯一的标识符，React 会错误地假设最后一个元素没有变化，从而不会进行重新渲染。
4. 这导致删除操作不会在 UI 上反映出来，从而产生错误的结果。

---

5. 正确

1. 代码

import React from 'react';

const ListComponent = () => {
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' },
  ];

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ListComponent;

• 用具有唯一性的标识符作为 key，React 可以正确识别每个元素的变化并进行准确的 diff 操作，以获得正确的更新行为。

---

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉