react Diff 算法
新旧虚拟DOM应该如何比对呢? react底层使用Diff(difference)算法来进行比对。我们知道,调用了setState方法时,数据(state,props)发生改变,就会进行比对。 下面我们先来看看setState方法。 setState方法是异步的,这样能够很好地提升react性能。假如我们要连续调用三次setState,变更三组数据,那么如果做三次虚拟DOM比对,更新三次页面。如果这三次调用的时间间隔非常短,这样是非常浪费性能的;react不会这样,它会把三个setState合并成一个,只做一次虚拟DOM的比对,更新一次页面。 我们再来看看Diff算法 Diff算法有个很重要的概念:同级比较。 首先会比较最顶层的虚拟DOM节点是否一致,如果一致的话,就继续比较下一层的节点;如果不一致的话,react就会把这个节点及其下面所有节点全部删掉,重新生成一遍新的DOM,然后用新的DOM替换原始页面的DOM。有人可能会说,这样性能不是会很低吗?如果除了这个最顶层节点不一致,下面都是一致的,这样整个替换,不会很浪费性能吗?其实,虽然可能会造成DOM重新渲染性能上的浪费,但比对的算法简单,由此比对速度也会很快,大大减少了比对算法上的性能消耗,所以采用同级比较的算法。 假如我们一个数组,数组中有5个数据,在页面第一次渲染的时候,我们把这5个数据映射成5个虚拟DOM节点