虚拟DOM Diff算法解析

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

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

 <ul>
    <li ksy='000'>000</li>
    <li ksy='111'>111</li>
    <li ksy='222'>222</li>
    <li ksy='333'>333</li>
    <li ksy='444'>444</li>
    <li ksy='555'>555</li>
    <li ksy='666'>666</li>
  </ul>
//222后边插入 777
<ul>
    <li ksy='000'>000</li>
    <li ksy='111'>111</li>
    <li ksy='222'>222</li>
    <li ksy='777'>777</li>
    <li ksy='333'>333</li>
    <li ksy='444'>444</li>
    <li ksy='555'>555</li>
    <li ksy='666'>666</li>
  </ul>

这样react会找到位置，在222和333中间插入<li ksy='777'>777</li>，其他组件不会删除，只是执行了新组件的创建

如果使用index作为key

 <ul>
    <li ksy='0'>000</li>
    <li ksy='1'>111</li>
    <li ksy='2'>222</li>
    <li ksy='3'>333</li>
    <li ksy='4'>444</li>
    <li ksy='5'>555</li>
    <li ksy='6'>666</li>
  </ul>
//222后边插入 777
<ul>
    <li ksy='0'>000</li>
    <li ksy='1'>111</li>
    <li ksy='2'>222</li>
    <li ksy='3'>777</li>
    <li ksy='4'>333</li>
    <li ksy='5'>444</li>
    <li ksy='6'>555</li>
    <li ksy='7'>666</li>
  </ul>

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

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

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

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