Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤 Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载  Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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 秒面试系列一


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步