React中的key有什么作用？
一、是什么
首先，先给出react组件中进行列表渲染的一个示例：
const data = [
{ id: 0, name: 'abc' },
{ id: 1, name: 'def' },
{ id: 2, name: 'ghi' },
{ id: 3, name: 'jkl' }
];
const ListItem = (props) => {
return
};
const List = () => {
return (
-
{data.map((item) => (
然后在输出就可以看到react所提示的警告信息：
Each child in a list should have a unique "key" prop.
只要根据其意义就能确定渲染列表中每一个子元素都必须拥有一个独特的键值
在这里可以使用列表的id属性作为key值以解决上面这个警告
const createList = () => {
return [
{data.flatMap(item => (
))}
];
二、作用
像Vue一样，React 采用了Diff算法。其核心功能是用来区分新创建的元素与被移动的元素。通过这一机制，React能够有效地降低不必要的元素渲染。
因此key的值需要为每一个元素赋予一个确定的标识
如果列表数据渲染中，在数据后面插入一条数据，key作用并不大，如下：
this.state = {
numbers:[111,222,333]
}
insertMovie() starts the process of inserting a new movie. The function creates a new array, const newMovies is created by appending 444 to the existing list of movies, and then updates the state with this updated movies array.
-
{
this.state.movies.map((item, index) => {
return
- {item} }) }
前部分元素采用diff机制进行处理，在差分计算过程中这些前部分元素彼此完全相同，并未产生任何删除或创建操作；最后一步运算时，则需将其插入到新的DOM结构中
因此，在这种情况下，元素有无key属性意义并不大
下面再来看看在前面插入数据时，使用key与不使用key的区别：
addMovie() {
const newMovies = [ ,...this.state.numbers];
self.setState({ movies: newMovies });
}
具备key属性时, React组件会根据key属性匹配组件中原有的子项与最新的子项.例如,在这种情况中,只需将编号为000的元素插入到最前面位置.
当没有key的时候，所有的li标签都需要进行修改
同样地，并非拥有key值表示性能越优；如果仅关注文本内容的变化，则不写入key值可能在性能和效率上表现更好
主要是因为不写key是将所有的文本内容替换一下，节点不会发生变化
处理写入key的过程涉及节点增删操作。若旧键不存在，则删除旧键；若新键之前未存在，则新增该键。此过程带来性能消耗。
三、总结
良好使用key属性是性能优化的非常关键的一步，注意事项为：
- key 必须唯一
- key不应为随机值，在下次渲染期间可能会生成不同的数值
- 应基于 index 设置 key 值，并不会带来性能提升
react判断key的流程具体如下图：