React为了提高网络性能,引入了virtual DOM的机制。
每当产生数据变化时,React都会重新构建整个DOM树,然后跟前一个DOM树进行比较,得出DOM结构的区别,然后根据这个区别去部分更新浏览器的DOM.
React能够批处理虚拟DOM的刷新,在一个事件内的两次数据变化会主动被合并。也就是说:如果两个操作是互逆操作,意味着UI不会发生改变(UI的改变:通过整体刷新来完成)。然而即使DOM树的结构每次都需要重构,但由于虚拟DOM是内存数据,所以性能是不受多大影响的。
在保证了性能的同时,开发者也不再需要关注某个数据的变化是如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个变化下,整个界面是如何渲染的。