使用简单索引作为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} />
)}
参考资料:
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程