What is your understanding of the React – Diff algorithm and its optimization strategy?

How do you react? React uses the Virtual DOM to compare the parts that actually change, and only performs native DOM manipulation on the parts that change, rather than re-rendering the entire page.

The Diff strategy

React converts O(n^3) complexity to O(n) complexity using three strategies

Strategy 1: Tree diff

  • For hierarchical comparison of trees, two trees only compare nodes at the same level. If the node does not exist, the node and its children are removed completely and no further comparison is made.



The question is, what does Diff do if DOM nodes operate across hierarchies? A: Diff simply considers the position of nodes at the same level or, if it is across levels, only the creation and deletion of nodes.



As shown in the figure above, the entire tree with A as the root node is recreated rather than moved, so it is recommended that you do not move DOM nodes across the hierarchy and hide and show them using CSS rather than actually removing or adding DOM nodes.

Strategy 2: Component Diff

React compares different components using three different strategies. (1) Compare two components of the same type using the same strategy (hierarchy comparison).

(2) When two components of the same type change from component A to component B, the Virtual DOM may not change at all. If you know this (the Virtual DOM does not change during the transformation), A lot of computing time can be saved. So the user can use shouldComponentUpdate() to determine if the calculation needs to be judged.

(3) Different types of components, identify a component (to be changed) as dirty component, thus replacing all nodes of the whole component.

Strategy 3: Element diff

When nodes are at the same level, diff provides three node operations: delete, insert, and move.

Insert: component C is not in the collection (A,B) and needs to be inserted

Delete :(1) component D is in the set (A,B,D), but the node of D has been changed and cannot be reused and updated, so it is necessary to delete the old D and create A new one.

(2) Component D was in the set (A,B,D) before, but the set becomes A new set (A,B),D needs to be deleted.

Mobile: Component D have been set (A, B, C, D), collection and update, D no update, just position change, such as new collection (A, D, B, C), D in the second, do not need to like traditional diff, let old set the second B and new set of the second D comparison, and delete the second location B, then in the second position in D, Instead, add a unique key (for children of the same level) to distinguish them and move them.

See the React Diff algorithm for a simple illustration.

React-diff based development recommendations

  • Based on Tree Diff:

    1. When developing components, keep the DOM structure stable; That is, do as little dynamic manipulation of the DOM structure as possible, especially movement operations.
    2. When the number of nodes is too large or the number of page updates is too many, the phenomenon of page lag will be obvious.
    3. Instead of actually removing or adding DOM nodes, you can hide or show them using CSS.

  • Based on Component Diff:

    1. Note the use of shouldComponentUpdate() to reduce unnecessary component updates.
    2. Similar structures should be packaged as components to reduce both code and component diff performance costs.

  • Based on Element Diff:

    1. For the list structure, operations such as moving the last node to the head of the list should be minimized. When the number of nodes is too large or update operations are too frequent, React rendering performance will be affected to some extent.

Reference:

React diff algorithm