react 数组下标来作为 react组件中的key
2023-07-03 本文已影响0人
云高风轻
1. 前言
- 为什么不能使用数组下边来作为
react组件中的key- vue 中也有这个问题,最好自己 写个列表 删除
demo,看看效果
2. 唯一标识
- 在 React 中，每个组件都需要一个
唯一的标识符作为key来标识和追踪列表中的每个元素。- 通常情况下，我们会选择使用
字符串或数字作为 key 值
3.不唯一问题
- 使用数组
下标作为key的问题在于，当列表发生变化时（例如插入、删除或重新排序），数组下标会发生变化，这可能会导致不必要的重新渲染或错误的行为。
可能问题
不稳定的列表顺序：当列表发生变化时，组件的key值会随之改变，
导致React无法正确识别和跟踪每个元素的状态。
这可能导致重新渲染整个列表，即使只有一个元素发生了变化。
错误的更新行为：如果使用数组下标作为 key，而不是唯一标识符，那么当列表中的元素发生变化时，React 可能会错误地认为相同下标的元素没有发生变化，导致不正确的更新行为。
重复的 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;
- 我们点击 "Add Item"
按钮，将会在列表末尾添加一个新的元素。- 然而，当我们点击
"Remove Item"按钮时，实际上是删除列表中的最后一个元素。- 由于列表中的元素
没有唯一的标识符，React 会错误地假设最后一个元素没有变化，从而不会进行重新渲染。- 这导致删除操作不会在 UI 上反映出来，从而产生错误的结果。
5. 正确
- 代码
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 操作，以获得正确的更新行为。
