React的列表
如果我们要在React中把一个数组转化成为我们的列表要怎么转换呢？
你可以通过使用 {} 在 JSX 内构建一个元素集合。
//定义一个NumberList组件
function NumberList(props) {//使用组件需要传入一个number值const numbers = props.numbers;//使用 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 `<li>` 标签const listItems = numbers.map((number) => <li>{number}</li> ); //然后我们把整个 `listItems` 插入到 `<ul>` 元素中return (<ul>{listItems}</ul> );
}const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root')
);我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems.然后我们把整个 listItems 插入到 <ul> 元素中，然后渲染进 DOM。
当我们运行这段代码，将会看到一个警告 a key should be provided for list items，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。这是为了帮助 React 识别每个列表项的身份，并在进行列表更新时进行优化。
添加key
添加之后就不会再有警告了
function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =><li key={number.toString()}> {number}</li>);return (<ul>{listItems}</ul>);
}const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('root')
);
为什么一定要添加key
-
识别列表项的身份：key 属性充当列表项的唯一标识符，帮助 React 区分每个列表项并识别其身份。在进行列表更新时，React 使用 key 属性来确定哪些列表项需要进行添加、移除或更新操作。
-
提高渲染性能：通过为列表项提供唯一的 key 属性，React 可以更高效地比较前后两个列表的差异，并只对真正需要更新的列表项进行重新渲染。这样可以减少不必要的 DOM 操作和组件实例的创建和销毁，从而提高整体渲染性能。
-
避免状态丢失：当列表项的顺序发生变化时，如果没有提供 key 属性，React 可能会错误地认为某些列表项被移除，而实际上它们只是在不同的位置重新排列。这可能导致 React 销毁和重新创建组件实例，导致组件状态丢失或不正确的行为。
-
保持稳定的标识：key 属性的值应该是稳定的、在列表的更新过程中不会发生变化的。这样可以确保在列表项更新时，React 能够正确地匹配前后两个列表中的对应项，并进行正确的更新操作。
key
key的要求
- 一个元素的 key 必须是这个元素在列表中拥有的一个独一无二的
- 元素的 key 只有放在就近的数组上下文中才有意义。
- key 只是在兄弟节点之间必须唯一
元素的 key 只有放在就近的数组上下文中才有意义。
如果你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。
例子：不正确的使用 key 的方式
function ListItem(props) {const value = props.value;return (// 错误！你不需要在这里指定 key： <li key={value.toString()}> {value}</li>);}function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =>// 错误！元素的 key 应该在这里指定： <ListItem value={number} /> );return (<ul>{listItems}</ul>);}const numbers = [1, 2, 3, 4, 5];ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('root'));
例子：正确的使用 key 的方式
function ListItem(props) {// 正确！这里不需要指定 key： return <li>{props.value}</li>;}function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =>// 正确！key 应该在数组的上下文中被指定 <ListItem key={number.toString()} value={number} />);return (<ul>{listItems}</ul>);}const numbers = [1, 2, 3, 4, 5];ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('root'));
一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。
key 只是在兄弟节点之间必须唯一
数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值：
