说说react中虚拟DOM 在虚拟DOM中diff和key之间有什么关系

Virtual DOM 也就是虚拟DOM 是一种编程概念 虚拟DOM是一颗虚拟JS对象树 它就是模拟真实DOM 把真实DOM模拟成了一个一个的js对象 并且以树形结构的方式 保存在内存中

        虚拟DOM实现的流程：

                1. 首先就是对初始化创建的页面进行分析然后创建出一个js对象格式的虚拟DOM树

                2. 然后再进一步根据虚拟DOM生成真实DOM然后渲染到页面中

                3. 如果后续DOM节点发生改变（例如删除修改等） 则会生成一颗全新的js对象格式的虚拟DOM树

                4. 然后会去和上一次生成的树进行diff算法比较 比较出有哪些不同 然后生成一个只有不同元素信息的patch

                5. 然后再将这个patch 传递给真实DOM进行针对性的修改 然后再将修改后的页面渲染到屏幕中

 

                

        

diff与key之间的关系在于 虚拟DOM通过设置key值的方式 在需要diff比较节点差异的时候 可以更快更准确的找到DOM节点

  所以在这里key值不能设置为index 因为设置index的话 如果我们删除了一个元素则所有的index都发生了变化就会造成影响 所以一般设置的key值应该都是唯一的