React diff--lastIndex作用理解

React的diff中有个用lastIndex来做顺序优化的手段。lastIndex就是当前在旧集合中访问的最右边的节点位置。这几天感觉这个优化手段还是有点难理解的，后面发现用一种相对位置最大化利用的角度可以解释清楚一点。

以上面这个图为例：

1、一开始我们以旧集合中第一个位置作为相对位置，我们从新集合中的B出发，发现B在旧集合中是在相对位置的右边，说明这个时候B对于前面节点的顺序是没有影响的，相对顺序正确。

2、然后我们将旧集合中B所在的第二个位置作为相对位置，接着从新集合中的下一个节点A出发，发现A在旧集合中是在相对位置的前面，说明这个时候相对的顺序已经错了，A的位置应该是在相对位置之后的，所以会添加一个move的操作。

3、这个时候相对位置还是旧集合B所在的第二个位置，我们接着从新集合中的D出发，发现D在旧集合中是在相对位置右边的，这个时候相对位置正确，不需要move。

4、这个时候相对位置被更新为旧集合中D所在的第四个位置，我们接着从新集合中的C出发，发现C在旧集合中是在相对位置的前边，相对顺序错了，所以会添加一个move的操作。

总结：如果没有lastIndex这个优化手段的话，上面那个例子我们需要移动四次，现在使用了这个优化手段后我们只需要move两次，感觉优化上还是很有效果的。但是有一种特殊情况：如果只将旧集合中的最后一个节点移动到队列头部，这个时候如果是n个节点就需要做n-1次move了，大家可以想想为什么~