• 使用简单索引作为key
    • 坏实践
    • 好实践
  • 参考资料:

    使用简单索引作为key

    Keys 应该是稳定,可预测,并且唯一的. 这样React才能正确追踪到某一个元素.

    坏实践

    在下面这段代码中,每个元素的key事实上是它在todos这个数组里面的顺序, 而事实上更好的实践应该是把key和我们想要表达的数据紧紧关联在一起. 下面这种做法会阻碍React对于我们组件的优化.

    1. {todos.map((todo, index) =>
    2.   <Todo
    3.     {...todo}
    4.     key={index}
    5.   />
    6. )}

    好实践

    假设todo.id是唯一的并且稳定的, React便能更好的去控制这些组件的更新(否则我们可能会面临大量重复创建的组件, 并且每次更新都是重新render这些组件.)

    1. {todos.map((todo) =>
    2.   <Todo {...todo}
    3.     key={todo.id} />
    4. )}

    参考资料:

    • React docs
    • Lin Clark’s code cartoon