key 是什么？列表中使用时有什么优点？

2019-03-04

回答

Keys 是一种特殊的字符串属性，可以帮助 React 识别哪些项已经被修改过、添加过或删除过。当渲染数组元素时就需要使用 key 来给每一个元素进行固定的标识。每一个元素的 key 必须是唯一的（例如，数据中的 IDs 或最终排序后的索引）。

const todoItems = todos.map(todo => <li key={todo.id}>{todo.text}</li>)

加分回答

• Keys 为集合中的元素提供来固定的标识，从而帮助 React 来识别增删改。
• 如果项目的顺序可能会发生变化，则不建议使用索引作为 keys，因为这可能会对性能产生负面影响，并且可能会导致组件的状态出现问题。
• 如果将列表项单独提出来做为一个组件，在列表组件中 li 标签上的 key 需要提升到 ListItem 组件上。如下所示：

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>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

返回总目录

30 秒面试系列一