The effect of Diff

React Diff will help us figure out what really changed in the Virtual DOM and only perform actual DOM manipulation on that part of the Virtual DOM instead of re-rendering the entire page

The problem of traditional diff algorithm

The traditional DIFF algorithm uses cyclic recursion to compare nodes in turn, which is O(n^3) complexity and inefficient.

React Diff algorithm policy

  • Tree diff: Ignore the operation of UI-level DOM nodes across hierarchies. (Small quantity)
  • For component structures (Component diff) : Have the sameclassThe two components of theclassThe two components generate different property structures.
  • For element structures (element-diff): For a group of nodes at the same level, use haveuniquenessId distinction of (key attribute)

Tree Diff features

  • React hierarchically traverses the virtual DOM tree using updateDepth

  • The two trees only compare nodes of the same level. As long as the node does not exist, all its children will be removed completely and no further comparison will be made.

  • The comparison of the entire DOM tree is done only once.

React Diff only considers the position changes of nodes at the same level. If the position changes across different levels, nodes are created and deleted. That is, the same node is recreated in a new location and the node in the original location is deleted.

React officially advises against cross-hierarchical manipulation of DOM nodes, but using CSS to hide and show nodes, rather than actually removing and adding DOM nodes, keeps the DOM structure stable to improve performance.

Characteristics of Component Diff

  • Components of the same type compare virtual DOM trees according to tree Diff
  • For components of the same type, component A is converted to component B. If the virtual DOM does not change, it can passshouldComponentUpdate()Method to determine whether

ShouldComponentUpdate shouldComponentUpdate

  • Different types of components, then the diff algorithm will determine the component to be changeddirty componentTo replace all nodes of the entire component.

React will delete components and their sub-components and create new components and their sub-nodes instead of determining whether they are of different types as long as they have different structures.

Element characteristics of diff

React Diff provides three types of node operations for nodes at the same level: insert, move, and delete

  • Insert: The collection is inserted when the new component is not in the original collection but is a new node.
  • Delete: The component is already in the collection, but the collection has been updated and the node needs to be deleted.
  • Move: ComponentsAlready in existenceAnd when the set is updated, the component is not updated, but the position is changed, for example :(A,B,C,D) → (A,D,B,C), ifTraditional diffReact Diff removes B and inserts D when it detects that the second bit of the old set is B and the second bit of the new set is D, and all subsequent nodes are reloaded. React Diff does this by adding nodes to the same layerThe only keyDifferentiate and move.

Some moving scenes and logic

The nodes are the same, but the positions are different

Begin traversal in the order in the new collection

  1. B in the new set lastIndex = 0, in the old set index = 1, index >lastIndexB has no effect on the position of the other elements in the set, does not move, and thenlastIndex = max(index, lastIndex) = 1
  2. A is in the old set index is equal to 0lastIndex= 1, satisfy index <lastIndex, then the operation of moving A is carried outlastIndex = max(Index, lastIndex) = 1
  3. D and B operate in the same way as (1) and do not movelastIndex=max(index, lastIndex) = 3
  4. C and A operate the same, same as (2), move, thenlastIndex = max(index, lastIndex) = 3
The node positions are all changed

1. In the same case, B does not move, lastIndex=1

Select * from ‘lastIndex’ where ‘E’ does not exist, create ‘E’ where ‘lastIndex++’

Select C from old set, C does not move, lastIndex=2

4. Select A from the old set, A moves to the position in the new set, lastIndex=2

5. After completing diff of all nodes in the new set, iterate over the old set to find nodes (D in this case) that do not exist in the new set and delete node D.

React Diff’s weaknesses

In this case, D is directly promoted from the last digit to the first digit, leading to the lastIndex being directly promoted to 3 in the first step, which makes ABC’s index < lastIndex when judging index and lastIndex, so that ABC needs to move. Therefore, we should reduce the operation of upgrading the last node to the first one, if the operation frequency is large or the number of nodes is large, it will affect the rendering performance.

summary

  • React Diff differs from traditional diff in that React optimizes O(n^3) to O(n).
  • React optimizes tree diff, Component Diff, and Element Diff in three ways
  • Keeping the DOM structure as stable as possible during development and reducing the need to move the last node to the front optimizes rendering performance.

The resources

Deep in the React Tech Stack

React Diff – React Diff