react同类同级diff比较解析 react同类同级diff比较解析

Diff算法3个策略

跨层级不进行不比较
不同类不进行比较
同类同级通过key比较

主要对第三种进行解释
例子更新前组件：A-B-C-D => 更新后组件：C-B-E-A
满足child._mountIndex < lastIndex才会进行组件移动

child._mountIndex其实是当前的index，但此时正在比较，还未变动，也就是更新前的index
lastIndex是一个不断更新的值，每一个组件比较后，lastIndex为Math.max(prevChild.mountIndex,lastIndex)

【react同类同级diff比较解析】遍历新集合：
比较C：child._mountIndex为2，lastIndex为0,不满足，不执行变动，更新lastIndex为2；
比较B：child._mountIndex为1，lastIndex为2，满足，执行移动，更新lastIndex为2；
比较E：旧集合未找到，执行添加，lastIndex为2；
比较A：child._mountIndex为0，lastIndex为2，满足，执行移动，更新lastIndex为2；
遍历旧集合，发现D，执行删除
缺点从上面例子可以发现，diff算法主要通过不断更新lastIndex进行判断，因此，
如果lastIndex一开始就更新成最后一个index，那么后面的所有组件都要进行变动。
例如：
更新前组件：A-B-C-D => 更新后组件：D-A-B-C
一开始比较D：child._mountIndex为3，lastIndex为0,不满足，不执行变动，更新lastIndex为3；
此时lastIndex已经为最大值，后面所有比较都会满足child._mountIndex < lastIndex
更新变动为：
D组件不变
A,B,C组件都要移动