In react, the results render execution are not really DOM node, the result is only lightweight javascript. Virtual DOM of the page only real change is part of the operation, so we do not need to worry about performance issues, you can frantically refresh the page.
Virtual DOM added some special steps to avoid the whole grain DOM tree has been changed
DOM is very slow, very powerful element. They are suitable for the operation to be careful, believe it may lead to a page rearrangement.
Steps:
- 1. javascript object structure represents the structure of the DOM tree, to build a real DOM tree with the tree, which is inserted into the document
- 2. When the state changes, re-construct a new object tree, and then the new Compare the old tree
- 3.记录上一步的两棵树的差异应用到第一步所构建的真正的DOM树上，此时视图就更新了。Virtual DOM is essentially between DOM and js made a cache