React(1) Diff 算法中的 key

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React(1) Diff 算法中的 key，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含569字，纯文字阅读大概需要1分钟。

内容图文

1. diff算法

关键点在于 key，key是虚拟dom 中的标识，当列表数据变化产生新的虚拟dom，React 会把前后新旧虚拟dom 进行 diff 对比

• key 不变：
  • 对应的 遍历item 数据不变，直接使用原始真实dom
  • 对应的 遍历item 数据改变，更新原始真实dom
• key 改变：
  • 原 key 改变，销毁原始真实dom，创建新的虚拟dom，随后渲染真实dom 到页面
  • 新 key 产生，创建新的虚拟dom，随后渲染真实dom 到页面

若用 index 作为 key 值，会造成性能降低，特殊情况下甚至出现意料之外的错误

• 新增、删除、排序时，index 不变，内容错位，会引起大范围的真实dom 更新，效率低
• item 中包含隐性状态，如input框中的输入内容，会带来错误的真实dom 更新

内容总结

以上是互联网集市为您收集整理的React(1) Diff 算法中的 key全部内容，希望文章能够帮你解决React(1) Diff 算法中的 key所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---