关于在 React 组件之间使用 Keys
文章目录

React: 关于使用 Keys 来索引列表

目的

key 的作用就是更新组件时加快 diff 的操作,

相同就复用,不相同就删除旧的创建新的

如果没有 key 那么很难一次性就找到需要更新的对应的节点。

使用方法

经常会遇见这样的警告:

Warning: Each child in an array or iterator should have a unique “key” prop.

一般将 key 放置到列表 class 里面进行赋值, 而不是放到 item 里面进行赋值

最好放在 ul 循环生成 li 的时候给 li 添加 key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function ListItem(props{
  const value = props.value;
  return (
  
    // Wrong! There is no need to specify the key here
    // 当然在这儿也获得不到 key 值

    <li key={value.toString()}>
      {value}
    </li>
    
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
  
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
    
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

正确用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function ListItem(props{
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props{
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}