react 虚拟dom和Diff算法

react

上一篇博客中,提到react的虚拟DOM,新旧虚拟DOM做对比,那么是如何对比,通过什么算法对比呢?就是diff算法,即difference

1、同层比对

二、通过key值进行比对,提高效率。key值一定要用稳定的数据。比如index实际上是不稳定的。因为删除之后他的下标其实还在,只不过下边对应的值变了。

右上图可以看出,循环放到页面的数据,尽量不要用index作为key值。因为,删除一个值的话,下标会变,key值就无法比对了,可以用item当作key。

当删除之后,发现key(item)的其中一项不在了,直接删除该key。比对完毕

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

以上是 react 虚拟dom和Diff算法 的全部内容, 来源链接: utcz.com/z/381588.html

回到顶部