虚拟DOM Diff算法解析

参考地址： https://www.jianshu.com/p/8bf3348aa236

注意： 对列表进行操作的时候，列表的key要前后保持一致
例如：

 

    
000
    
111
    
222
    
333
    
444
    
555
    
666
  
//222后边插入 777

    
000
    
111
    
222
    
777
    
333
    
444
    
555
    
666
  

这样react会找到位置，在222和333中间插入

777

，其他组件不会删除，只是执行了新组件的创建

如果使用index作为key

 

    
000
    
111
    
222
    
333
    
444
    
555
    
666
  
//222后边插入 777

    
000
    
111
    
222
    
777
    
333
    
444
    
555
    
666
  

则会造成，222以后的数据都会更新，在最后插入新的key=7的组件666，影响性能

总之，react是以key作为标识进行新旧dom的判断，

• 如果key不存在，则会直接remove，
• 如果相同的key，相同的组件，只是该children发生了变化，则会update，不同的组件，则会remove，然后插入新组件

所以key的设置，避免使用map的index索引，因为插入一条数据之后会造成下边的组件key值全部变化，尽量设为列表数据的唯一的id，提高渲染速度