React虚拟DOM是个什么套路？

Posted 2021-04-13 web前端教室

React最大的亮点就是快！天下武功，唯快不破，它走的就是这条路。那么它的快是如何达成的呢？是通过虚拟DOM，也就是它所说的Virtual DOM了。

那这个虚拟DOM，它到底是个什么东西呢？一句话，它是一种JS的数据结构。

这个结构是怎么生成，怎么来的？咱们暂且不管，这方面自有React的diff算法搞定。我们要做的是正确的理解它。

我们大家都知道html的页面是由一层一层，一级一级的DOM节点，互相嵌套而成的。对于DOM的任何操作，文字啊、大小、位置、颜色等，只要有一点点改动，整个页面DOM重绘，而众所周知DOM重绘是很费时费工的。

而React对这个问题的解决思路是这样的，它通过数据层面的抽象，把HTML的DOM结构，映射为JS对象的键值对。并把这个对象保存在内存中，然后对于DOM的任何操作，都是相应的在内存中操作这个映射DOM结构的JS数据对象了。

你想想，这速度能不快么，第一在内存中操作是速度最快的；第二这种操作根本没有页面重绘。

然后你在内存中的操作都OK了，结构了，它再把你改动的地方，映射到实际的DOM中，进行重绘。

这就是React虚拟DOM的思路，说起来确实是很简单，几句话的事。但学起来还是需要我们下一定的功夫的。

-== 分割线 ==-

-== 分割线 ==-

详情点击：

课程表：