【javascript】关于react的Virtual DOM 与数据更新

港控/mmm° 2022-05-31 08:20 189阅读 0赞

一，关于Virtual DOM

真实的页面对应一个DOM树，传统的交互就是 DOM树 触发事件 -> 然后业务处理 ->操纵dom树。操作DOM性能消耗大，且繁琐，维护成本高。

![2018021300433993][]

于是 React把真实的DOM树转换成Javascript对象树，也就是Virtual DOM（我觉得可以表述成这样，不直接操作DOM，将DOM抽象成一个javascript对象树【dom元素可以表示成一个JS对象】，操作对象树更加友好）。用户不直接操纵DOM，通过Vitual DOM 去改变DOM。

![20180213004348639][]

说这样提升了性能，提升在哪里了呢？数据更新之后，就是APP（代表着我们的react APP或者Vue APP）包含的数据发生变化之后，React会去对这个对象树即Virtual DOM 与上一次做对比，对发生变化的部分做批量更新，这一步可以提升性能，React的生命周期方法shouldComponentUpdate也给我们提供了是否更新这个组件的入口。

二，数据更新（对比Vue）

**React里面**，比如一个父组件A 里面有子组件 B/C/D ,只要父组件A里面state（或者取自store，po主自己加的）里面的数据或者传递给子组件的props发生了变化，就会从新渲染整个组件树，A->B / C / D 就算改变的只是传递给B的数据，也会渲染整个组件树。

这一点其实不太友好，但是我们可以通过shouldComponentUpdate来进行判断，这个方法接收需要更新的props和state，让开发者自己判断是否数据发生了变化，如果发生了变化，则继续往下执行->componentWillUpdate->render->componentDidUpdate. 如果没有发生变化的话，则可以return false，这样就不再向下执行生命周期方法了。但是这样我们每一个子组件都需要去判断这个方法，略繁琐。

**        Vue里面，**这一点比较友好，底层本身帮我们做了这一层检测，相当于内部实现了这个componentShouldUpdate方法，如果父组件A的data或者mutation里面的数据发生了变化，但是只是与B相关，那么vue会自动re-render B组件，其他的C/D组件不会被从新渲染。当然你如果想通过数据变化做一些额外的操作，在B组件里面watch这个数据的变化，即可。

资料：《深入React技术栈》 1.1.2 / 1.5.2章节

[2018021300433993]: /images/20220531/82ff0b0e99c04b4f90df995f2de6239e.png
[20180213004348639]: /images/20220531/41d6b59cee8b445cbc440d59405cfae7.png