React Virtual DOM diff algorithm

React virtual DOM: based on diff algorithm platform

Front End: Update status, update view; So the performance problem of front page is mainly caused by Dom operation, and the operation complexity of liberating DOM is urgent.

Because: Dom rendering is slow, and JS parsing compilation is very very very fast! JSG more easily represent nodes

So: The JS and HTML mixed together to solve, react appeared!!!

The diff algorithm is the virtual DOM core:

The traditional diffs algorithm complexity is the secondary level growth, while the react uses the optimized diff algorithm:

Procedure: 1. Node comparison (attributes, text); 2. Record the difference (number), 3. Change (JS);

Optimization points:

Scenario 1: Old parent node and new parent node as long as it's not the same, OK, severed arm! Even if the child node is exactly the same, delete it and render the new node;

Scenario 2: Parent node is the same, compare node properties, text, replace or delete

React Virtual DOM diff algorithm