文章插图
首先也是按照顺序取出第一项 ， 然后根据标识“key=04”在左边寻找拥有同样key的一项 ， 发现没有 ， 于是直接转为真实DOM 。
文章插图
然后按顺序取出第二项 ， 根据标识“key=01” ， 在左边寻找也是“key=01”的一项 ， 挨个对比文本节点和标签节点 ， 发现两个节点都完全一样 ， 所以直接复用之前的真实DOM 。
文章插图
以此类推 ， 李四和王五都是直接复用左边的真实DOM 。
四、总结
- 用index作为key可能会引发的问题：若对数据进行逆序添加、逆序删除等破坏顺序的操作时 ， 会产生没有必要的真实DOM更新 ， 此时界面效果没有问题 ， 但效率太低 。
- 在开发中如何选择key：最好使用每条数据的唯一标识作为key ， 比如id、身份证号、手机号等 ， 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作 ， 仅用于渲染列表用于展示 ， 使用index作为key是没有问题的 。
经验总结扩展阅读
- Nginx 使用自签名证书实现 https 反代 Spring Boot 中碰到的页面跳转问题
- 中元节吃什么传统食物
- 酱油品牌排行榜前十名
- 冬天冰箱高中低调到几档最合适 冰箱冬天可以关掉吗
- 2023年中秋节是农历几月几号
- 2023年的中秋节在星期几
- 2023年中秋节怎么放假
- 2023年中秋和国庆一起放几天假
- 今年中秋节国庆节怎么放假2023
- 中秋节休息几天2023