虚拟DOM Diff算法解析
2019-03-04 本文已影响0人
16manman
参考地址： 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，然后插入新组件
