Why the Virtual Dom

The Virtual Dom corresponds to the Real Dom, the Dom structure behind the UI that is actually shown to the user.

  • Each operationReal DomFirst, access is requiredReal DomThat’s one of the costs;
  • Modify theReal DOMCauses the browser to recalculate the geometry of the page, triggering the browser template engineRearrange and redraw, is only two of the consumption, and huge.

If you could consolidate multiple rearrangements into one, and locally update only the DOM with changes, wouldn’t that save a lot of money? And here comes Virtual Dom with a mission!

What is the Virtual Dom?

The key to JSX is the Virtual Dom.

const element = <h1 className="text">hello {name}</h1>;
Copy the code
const element = React.createElement(
  h1, // type
  { className: "text" }, // attribute
  "hello "./ /... children
  name
);
Copy the code

Representation of Virtual DOM:

let VNode = {
  tag: "h1".attrs: {
    className: "text",},children: ["hello", name],
};
Copy the code

The Virtual DOM simulates the structure of a Real DOM tree in the form of objects. So it is maintained in memory, and the Render () method of React returns a new tree when all changes to it are complete (state or props updates). React determines how to update the UI efficiently based on the difference between the old tree and new tree (diff). The diff algorithm becomes the key to performance optimization.

Optimization strategy

React optimizes the DIff algorithm according to the characteristics of UI updates, and finally proposes a set of O(n) heuristic algorithm (common solution complexity is O(n 3)) :

  • Two different types of elements produce different trees;
  • Set the key attribute for elements of the same type. The same key value can be kept unchanged in different renders.

Breadth first hierarchical comparison

React compares two trees by “layer” starting at the root, and does not do cross-layer comparisons.

If the type changes, delete it directly

React does not check whether nodes of different types are reused elsewhere. Instead, it simply removes old nodes and adds new ones. For example, React does not change parentNode after a node is moved.

React makes a performance trade-off based on the premise that the DOM structure of components is relatively stable. The trade-off is to gain performance gains in most cases while sacrificing performance costs in a few cases.

The key attribute

Add a key attribute as a unique identifier for sibling nodes of the same type.

React distinguishes between new and old elements and changes in their order based on keys.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>
Copy the code

When your list is reordered, never use index as the key. This can cause confusion, as the states of uncontrolled components (such as input fields) can be manipulated with each other.

In Codepen, there are two examples, one to show the problems caused by using subscripts as keys, and one to show the version of the example that does not use subscripts as keys, fixing the problems of reordering, sorting, and inserting in the list header.

The resources

  • Coordination: zh-hans.reactjs.org/docs/reconc…
  • What happens when the VNode structure changes? : supnate. Making. IO/react – the dom – d…

Introduction to the React

  • React: What were you thinking before writing components?
  • React: Talk about JSX
  • React: Full lifecycle and methods
  • React: Learn about the Virtual Dom and its policies
  • React: Two techniques for component reuse (High order components & Render Props)