React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

初学React,其中一个很重要的概念是虚拟DOM，看了一篇文章，顺带翻译一下。

If you are using React or learning React, you must have heared of the term `Virtual DOM`. Now what is Virtual DOM and why does react use it?

如果你正在用或者学习React,你一定听过虚拟DOM这个词儿。那什么是虚拟DOM? React为啥要用它呢？

Real DOM

First things first, DOM stands for "Document Object Model". The DOM in simple words represents the UI of your application. Everytime there is a change in the state of your application UI, the DOM get updated to represent that change.

Now the catch is frequently manipulating the DOM affects performance, making it slow.

真实DOM

　　首先，DOM是"Document Object Model"的缩写，即文档对象模型。简单来说，DOM代表着应用程序的UI。每次当应用程序UI的状态发生变化，DOM就会更新。

　　现在的问题是频繁操作DOM会影响性能，使其变慢。

What makes DOM manipulation slow?

The DOM is represented as a tree data structure. Because of that, the updates and changes to the DOM are fast. But after that change, the updated element and it's children have to be re-rendered to update the application UI. The re-re-rendering or re-painting of the UI is what makes it slow. Therefore, the more UI you have, the more expensive the DOM updates could be, since they would need to be re-rendered for every DOM update.

什么导致的DOM操作慢？

我们用树结构来表示DOM。因此，对DOM的更新和修改是很快的。不过DOM变了以后，被更新的元素和它所有的子节点都必须重新渲染才能更新UI。正是UI重新渲染导致DOM操作慢。所以，如果UI越多，DOM更新就越慢，因为每个DOM更新都需要重新渲染。

Virtual DOM

That is where the concept of Virtual DOM comes in and performs significantly better than real DOM. The Virtual DOM is only a virtual presentation of the DOM. Everytime the state of our application changes, the Virtual DOM gets update instead of the real DOM.

Well, you may ask `Isn't the virtual DOM doing the same thing as real DOM, this sounds double work? How can this be faster than just updating the real DOM?`

The answer is virtual DOM is much faster and efficient, here is why.

虚拟DOM

这就是虚拟DOM概念的由来，并且比真实DOM效率更高。虚拟DOM只是DOM的虚拟表现形式。每当我们的应用状态发成改变，虚拟DOM就会更新而不是真实DOM。

那么问题来了，你可能会问，虚拟DOM岂不是跟DOM干的事儿一样？看起来做了重复工作，那它怎么能会比只更新真实DOM更快呢？

答案就是虚拟DOM更快更有效率。

How is Virtual DOM faster

When new elements are added to UI, the virtual DOM which is represented as a tree is created. Each element is a node on this tree. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or `differed` with the previous Virtual DOM tree.

Once this is done, the virtual DOM calculates the best possible method to make the changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.

The picture below shows the virtual DOM tree and diffing precess

　　当UI上新增元素时，一个树结构的虚拟DOM就会被创建出来。每个元素都是这个树结构的节点。如果这个树上的任意一个节点发生改变，一个新的虚拟DOM树会被创建。然后这个树将会和之前的树做比对。

　　一旦这些都完成了，虚拟DOM会计算出一个最优的方法来更新真实DOM。这就保证了在真实DOM上的操作是最少的。因此会减少更新真实DOM的性能损耗。

　　下图说明了虚拟DOM树和比对过程

source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

The red circles represent the nodes that have changed. These nodes represent the UI elements that have had their state changed. The difference between the previous version of virtual DOM tree and current virtual DOM tree is calculated. The whole parent subtree is then gets re-rendered to give the updated UI. This updated tree is then batch updated to the real DOM.

　　其中红色的圆圈表示有改变的节点。这些节点代表UI上发生过状态变化的元素。然后当前虚拟DOM树和未发生改变的虚拟DOM树之间的差异就可以计算出来了。然后所有子树的父节点都会重新呈现来更新UI。更新过的树就会批量更新到真实DOM.

How does React use Virtual DOM

Now that you have a fair understanding of what Virtual DOM is, and how it can help with performance of you app, lets look into how React leverages the Virtual DOM.

In React, every piece of UI is a component, and each component has a state. React follows the Observable Pattern and listens for state change. When the state of a component changes, React updates the Virtual DOM tree. Once the VIrtual DOM has been updated, React then compares the current version with previous version Virtual DOM. This process is called `diffing`.