开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情
前言
昨天学习了React的生命周期和相关事件处理事项，今天来继续学习列表和key~
列表和key
单独的React列表概念很简单，就是组件生成多个元素，例如下面的官方例子
function NumberList(props) {
const numbers = props.numbers;
// 通过map生成多个li元素列表，如果不添加key的话，编译期会抛出一个警告
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('example')
);
但元素列表通常要配合key属性才能正常工作，React的key是一个特殊的属性，用来进行识别组件，是一种唯一标识，类似于身份证。React会根据key来判断是销毁重新创建组件还是更新原来的组件。
- key相同，如果组件属性发生一些变化，那么react只会更新组件变化的属性，其他则不做变动。
- key不同，则react会销毁该组件，原来组件的
componentWillUnmount会先执行，然后重新创建该组件。
通常我们也会有动态创建列表的需求，这个时候就会需要到key属性了。
元素列表因为动态的操作发生改变时，他们的所生成的子组件可能会发生变化，因此React需要使用key来判断是否为同一组件。同时React的key属性只需要在当前上下文保证唯一即可，无需全局唯一。
据说设置key能够提升元素列表的性能~
同时当我们设置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设置为index也行。
