Keys 应该是稳定,可预测,并且唯一的. 这样React才能正确追踪到某一个元素.
在下面这段代码中,每个元素的key事实上是它在todos这个数组里面的顺序, 而事实上更好的实践应该是把key和我们想要表达的数据紧紧关联在一起. 下面这种做法会阻碍React对于我们组件的优化.
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}假设todo.id是唯一的并且稳定的, React便能更好的去控制这些组件的更新(否则我们可能会面临大量重复创建的组件, 并且每次更新都是重新render这些组件.)
{todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}