Question

Keys 应该是稳定的，可预测的和唯一的，这样 React 就能够跟踪元素。

在下面的代码片段中，每个元素的键将基于列表项的顺序，而不是绑定到即将展示的数据上。这将限制 React 能够实现的优化。

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

假设 todo.id 对此列表是唯一且稳定的，如果将此数据作为唯一键，那么 React 将能够对元素进行重新排序，而无需重新创建它们。

{todos.map((todo) =>
  <Todo {...todo}
    key={todo.id} />
)}