Detailed explanation of operation of virtual dom simulation react view rendering

1. Why use virtual dom?

Web page performance optimization -> Try to operate DOM as little as possible

2..Virtual DOM (Virtual DOM) VS js direct operation of native DOM (innerHTML)

function Raw() {
  var data = _buildData(),
    html = "";
  ...
  for(var i=0; i<; i++) {
    var render = template;
    render = ("{{className}}", "");
    render = ("{{label}}", data[i].label);
    html += render;
  }
  ...
   = html;
  ...
}

In the following test case, although a String containing 1000 tags was constructed and added to the DOM tree, only one DOM operation was performed. However, in the actual development process, these 1000 element updates may be distributed among 20 logical blocks, each logical block contains 50 elements. When the page needs to be updated, it will cause the DOM tree to be updated. The above code will approximately become the following format:

function Raw() {
  var data = _buildData(), 
    html = ""; 
  ... 
  for(var i=0; i<; i++) { 
    var render = template; 
    render = ("{{className}}", ""); 
    render = ("{{label}}", data[i].label); 
    html += render; 
    if(!(i % 50)) {
       = html;
    }
  } 
  ... 
}

Practical scenario: In fact, a component often contains multiple partial views, and small state changes require the entire DOM to be reconstructed, which is too cost-effective. This is not advisable when there are many partial views of the page that need to be updated.

Mode and React template engine.

1. MVVM: Model-View-ViewModel MVVM can greatly reduce the complexity of our maintenance state -> views (greatly reduce the view update logic in the code). MV* mode: As long as the view component is declared in the template to which state is bound, the two-way binding engine will automatically be updated when the state is updated.
2. React rendering view principle: After React setState, the passed parameter object will be merged with the current state of the component. React will build the React element tree based on the new state in a relatively efficient way and start to re-render the entire UI interface. React will automatically calculate the node differences between the new tree and the old tree, and then minimize the interface and re-render according to the differences.

DOM simulates ReactJS view rendering general logic:

// 1. Build a virtual DOMvar tree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: blue'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li')])
])

// 2. Build a real DOM through a virtual DOMvar root = ()
(root)

// 3. Generate a new virtual DOMvar newTree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: red'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li'), el('li')])
])

// 4. Compare the differences between two virtual DOM treesvar patches = diff(tree, newTree)

// 5. Apply changes on real DOM elementspatch(root, patches)

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.