参考地址: 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,然后插入新组件