Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

preface

As the accelerator of Virtual DOM, diff’s algorithm improvement and optimization is the basis and performance guarantee of React interface rendering. Diff helps us figure out what really changes in the Virtual DOM and only do native DOM operations on that part of the Virtual DOM instead of re-rendering the entire page, thus ensuring efficient rendering of the page after each operation update.

The diff strategy

  • Strategy one:Web UI δΈ­ DOMThe movement of nodes across hierarchies is extremely rare and can be ignored
  • Strategy 2: Two components with the same class will generate similar tree structures, and two components with different classes will generate different tree structures
  • Strategy three: For a group of children at the same level, they can pass a uniqueidTo distinguish between

Based on the above strategies, React optimizes the tree Diff, Component Diff, and Element Diff algorithms.

tree diff

React compares trees at different levels. Two trees compare nodes at the same level. React uses updateDepth to control the hierarchy of the Virtual DOM tree. Only DOM nodes at the same hierarchy are compared, that is, all nodes under the same parent node. When a node is found to no longer exist, the node and its children are removed completely and are not used for further comparison. This allows you to compare the entire DOM tree with only one walk through the tree.

What if there is movement across hierarchies?

React simply takes into account the position changes of nodes at the same level. For nodes at different levels, only create and delete operations are performed.

See the figure below after node A moves to node D

  1. If node A disappears, destroy node A directly
  2. If A node A is found on node D, A (including child nodes) is created as its child node.

Creat A -> creact B -> create C -> delete A

React does not advise cross-hierarchy DOM node operations

component diff

  • If the components are of the same type, continue the comparison according to the original policyVirtual DOMA tree can be
  • If not, the component is judged to bedirty componentTo replace all child nodes under the entire component.
  • For components of the same type, it is possible thatVirtual DOMNothing changes, and knowing that for sure can save a lot of diff time. React therefore allows users to pass throughshouldComponentUpdate()To determine whether the component needs diff analysis.

See below:When the componentDChange forGReact determines when even two components are structurally similarD ε’Œ GIs a different type of component, will not compare the two institutions, but directly deletedDTo recreate the componentGAnd its children.

element diff

When nodes are at the same level, diff provides three node operations: INSERT_MARKUP, MOVE_EXISTING, and REMOVE_NODE.

  • INSERT_MARKUP: The new component type is not in the old collection, that is, the new node needs to be inserted into the new node.
  • MOVE_EXISTING: There is a new component type in the old collection andelementIt’s an updatable type, so you need to move it around, so you can reuse itDOMNode.
  • REMOVE_NODE: old component type, also present in the new collection, but correspondingelementIf not, it cannot be reused and updated directly and needs to be deleted, or if the old component is not in the new collection, it also needs to be deleted.

Add a unique key to distinguish sub-nodes of the same level and group to improve diff performance

After diFF differential comparison, it is found that the nodes in the old and new sets are the same nodes through key, so node deletion and creation are not required. Instead, the location of nodes in the old set is moved to the location of nodes in the new set. The DIFF result is: B and D do not do any operation, while A and C move.

conclusion

If this article helped you, please like πŸ‘ and follow ⭐️.

If there are any errors in this article, please correct them in the comments section πŸ™πŸ™