ReactJs的虚拟dom是个啥情况？

Posted 2021-04-13 web前端教室

这个周末的先行者课程要讲React的一些东西，所以今天写一些React的内容。

话说前端操作中最消耗资源的是啥？如果我说dom操作，那应该没有人会反对吧。

在以前使用jq的时候是先找到事件再操作dom，算是“事件更新dom”；现在的React和vue、angularJs之类的，都是把dom操作给隐藏起来，开发者就专心搞数据就好了，有数据了之后，更新到dom上去，算是“数据更新dom”。

至于这个数据是怎么具体到dom上去的？React们表示，这不用你操心，我给你办了。用什么办的？React说，“虚拟DOM(Virtual DOM)”。

//////

虚拟dom应该算是一种数据结构。它就不是dom节点，只是一个js对象罢了。因为是js对象，所以对它的处理不涉及dom树的插入、删除，dom节点的渲染，css的匹配什么的，这都不涉及。只是在内存中对js对象进行操作，所以效率比传统的dom操作要高出许多。

简单的说吧，如果没有虚拟dom，那你操作dom时其实就是在不断的修改innerhtml的值。而React的虚拟dom的diff算法只是纯粹的js层面的计算，比innerHTML这种操作dom树的方法，那开销小了不是一点半点。

DOM，虽然js可以操作它，但它和js其实不是一个东西。DOM只是浏览器开放出来的可以让js操作html文档的方法而已。在现在这个前端时代，随便有点小改动都去搞DOM节点，那开销是不可接受的。

//////

ReactJs它有二个特点：batching 和 Diff。

batching简单的说，就是批处理，就是尽可能把所有的DOM操作都获得，然后一次的发送给DOM。其实就是变相的减少了操作DOM的次数。

至于Diff嘛，大家都比较了解，其作用就是提高虚拟dom速度及性能的算法。正是在这二个特点的基础之上，React才没有像其它前端js框架那样采用数据绑定的方式去更新dom，而是采用了DOM层面的检查机制。

如果把React中的组件概念替换成DIV标签，那也只是圈套圈的码结构而已，区别只是在jsx中可以自定义标签名而已。

其实在我看来，React只是解决了DOM绘制方面的问题，对于数据的操作并不多，所以才有了后来的Redux。

点击查看：