在这篇文章中,我会简单讲讲关于 React
中的 key
与 diff
优化。
what
key
是 React
用于追踪列表中元素被修改、被添加或者被移除的辅助标识。
why
React
通过对列表中元素设置唯一 key
,对 virtual-dom
的 diff
过程进行算法优化。
how
在 React
的 diff
过程中 React
会通过元素的 key
值来判断该元素是否已经存在?是否需要创建?是否需要移动位置?从而减少不必要的元素渲染。
usage
-
key
应该在数组内,且在兄弟元素之间是唯一标识,但不需要是全局唯一。 - 不推荐使用索引来作为
key
,因为index
并不是稳定不变的,在不同的更新过程中,下标可能不同,所以当列表项顺序发生改变时,渲染将会较慢。 -
key
只是给React
内部使用,不会被传给组件。
best practise
使用列表元素的 id
作为键值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。