使用简单索引作为key

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

参考资料:

• React docs
• Lin Clark’s code cartoon