react-DOM-DIFF算法

react-DOM-DIFF算法

面试题：

1.React、Vue中，key的作用是什么，key的原理是什么？

• 简单的说：key是虚拟DOM对象的标识，在更新显示时key起到了极其重要的作用

• 详细的说：当状态中的数据发生变化时，react会根据【新数据】生成新的【DOM对象】，随后React进行【新的虚拟DOM】与【旧的虚拟DOM】==diff（different）==比较。

  • 如果旧的虚拟DOM中找到了与新的虚拟DOM相同的key：
    • 若虚拟DOM内容完全没有变化，则直接用之前的虚拟DOM
    • 若新的虚拟DOM内容发生变化了，则生成新的真实DOM，随后替换旧的真实DOM
  • 若旧的虚拟DOM中没有找到与新的虚拟DOM相同的key：
    • 根据数据创建新的真实DOM，随后渲染到页面上

• **重点：**DOM-Diff算法会以标签为颗粒做深层次Diff

2.为什么不能用index作为数据的key？

• 当我们以插入/删除最前面的形式向数组中插入数据时，就会造成==所有的数据索引值都会改变，那么虚拟DOM都会因为key值匹配不上而重新渲染，==就跟所有数据都需要重新生成真实DOM对象一样
• 解决：不用index作为key值，改用每个对象的唯一标识

• 页面中一旦出现输入内容的标签，每个标签如果属性啥的都相同，就会出现位置错乱的情况：

  • 

  • 

3.用index可能会引发的问题？

• 若对数据进行：逆序添加、逆序删除、等破坏数据之前顺序的情况：
  • 会产生没必要的真实DOM更新=》效率低
• 若结构还包含输入类DOM：
  • 会产生错误的DOM更新=》界面有问题

4.开发中如何选择key？

• 最好使用每条数据的唯一值：id,手机号、身份证、学号…