The virtual DOM is a real DOM converted JS object. The virtual DOM mechanism: a DOM API is implemented in JavaScript on the browser side. When React is developed, all DOM constructs are implemented through the virtual DOM. Whenever data changes, React will rebuild the entire DOM tree. React then compares the current entire DOM tree with the last DOM tree to obtain the difference of DOM structure. Then just do the actual browser DOM update for the parts that need to be changed. React can also batch the virtual DOM refresh. Two data changes in an Event Loop are merged. For example, if you change node contents from A to B and then from B to A, React will assume that the UI has not changed. This logic is often extremely complex. Although a complete virtual DOM tree needs to be constructed each time, performance is extremely high because the virtual DOM is in-memory data, and only the Diff part of the actual DOM is manipulated, so performance can be improved. This way, while maintaining performance, developers no longer need to focus on how a change in data is updated to one or more specific DOM elements, but only on how the entire interface is rendered in any given data state.
Reasons for faster virtual DOM performance: The real DOM has all kinds of DOM events and attributes, while the virtual DOM doesn’t have that many useless things, so when the browser traverses the virtual DOM, it traverses the virtual DOM much, much faster than the real DOM, and the virtual DOM also has the diff algorithm, which reduces the complexity of the algorithm by another dimension.
For the diff algorithm of the virtual DOM, see blog.csdn.net/weixin_4360…