This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

What is VirtualDOM and why is VirtualDOM Diff so effective

Virtual DOM Diff

How does Virtual DOM improve performance

  1. We’ll call the VirtualDOM generated by Render ‘Vdom’ for short
  2. The setState method is usually called to trigger a Vdom update
  3. Determine the operations needed to optimally implement the new ‘Vdom’ by comparing the old and new ‘Vdom’

The Virtual DOM Diff here also refers to the third step. A step that is not what we normally think about.

Virtual DOM Diff hierarchy

  • Component-level comparisons
  • Element-level comparisons

Because normally an HTML node is a complete tree, and the complete tree traversal is order n^3.

The time complexity of traversing all nodes in Virtual DOM is O(n^0).

This is one of the things that makes Virtual DOM so efficient

Component Diff

R – Entry App A – Configuration page 1 D – Configuration page 2 G – Configuration page 3

Current requirement to convert D (configuration component 2) to G (configuration page 3)

Although D and G components have the same EF, D, E and F components will be deleted here, and then G, E and F components will be recreated. (because there are the same EF subcomponents, after all, or a small probability event, realistic scenario, the EF may have many child components, hard to do one by one, all done is also very inefficient, not equal to all deleted, this is just personal feelings, do not do theoretical argument, first give a definition, interested can have time to discuss)

Element Diff

Create, move, and delete child nodes correspond to create, move, and delete in DOM operations

Create a node

create: function (child, afterNode,mountImage){
    return makeInsertMarkup(mountImage,afterNode,child._mountIndex);
}
Copy the code

Remove nodes

removeChild: function (child, node){
    return makeRemove(child, node)
}
Copy the code

Mobile node

The 1-2-3 = “1-2-3

The React implementation moves 1 after 3 and 2 after 3, which is inefficient. Try to avoid moving the last node to the front

Coordinate the reconciliation

This process is called reconciliation

The Virtual DOM Diff is a component of the React Reconciliation, which in the version of Act 15 is called Stack Reconciler.

Process review

  • Render execution render
  • Virtual Diff compares Virtual DOM
  • Commit Perform an update if it is determined to be needed (non-blocking)

Because it cannot be blocked, if the user has interactive behavior during the execution, the page may not come over accordingly, resulting in stutter.

Act16 introduces a new approach to coordination

conclusion

  • The Virtual DOM is essentially an abstraction of UI nodes. It’s just an abstraction of HTML DOM nodes in Web development. It’s also a sign that the front end is becoming more cross-platform.

  • Virtual DOM is more efficient than native. One is the efficiency of Diff algorithm to achieve efficient update, and the other is the efficiency of maintainability and programming thinking.

Refer to the link

Official website Virtual Dom reactjs.org/docs/faq-in…

Virtual DOM Node mithril.js.org/vnodes.html

The difference between the VDom and DOM reactkungfu.com/2015/10/the…

React Performance Optimization: A brief analysis of the Virtual Dom principle

Virtual Dom and Diff algorithms

PS: React water is getting deeper and deeper, it feels not suitable for playing this kind of short and flat text. Try another module.