react 虚拟dom和Diff算法

上一篇博客中,提到react的虚拟DOM,新旧虚拟DOM做对比,那么是如何对比,通过什么算法对比呢?就是diff算法,即difference
1、同层比对
react 虚拟dom和Diff算法
二、通过key值进行比对,提高效率。key值一定要用稳定的数据。比如index实际上是不稳定的。因为删除之后他的下标其实还在,只不过下边对应的值变了。
react 虚拟dom和Diff算法
右上图可以看出,循环放到页面的数据,尽量不要用index作为key值。因为,删除一个值的话,下标会变,key值就无法比对了,可以用item当作key。
当删除之后,发现key(item)的其中一项不在了,直接删除该key。比对完毕

当然同层比对和key比对只是diff算法的一部分,还有别的值得我们一究