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 操作，以获得正确的更新行为。
