React - diff algorithms and three kinds of optimization strategies

Recommended Learning Resources

• Reference article
• https://www.jianshu.com/p/ca44182828ae
• https://www.jianshu.com/p/3ba0822018cf

Brief introduction

react to the pursuit of the ultimate performance, using virtual dom, is itself a js object. Create an object much smaller than the overhead to create a dom node overhead. Of course, virtual dom ultimately into real dom. React in the process, converting the virtual real dom dom tree into the tree is referred to reconcile the minimum operation, diff algorithm embodied reconcile. For different situations, diff algorithm has three optimization strategy.

Optimization strategy tree (tree diff)

The core point

• Level control, diff trees in this layer only compare the current level of the same node.
• Violence removed if the same level compared to a node does not exist, or that the entire tree structure has undergone major changes, and that the node and its children will be directly destroyed
• Cross-comparison of the hierarchy will be created to operate the respective nodes and delete nodes.
  

Optimization strategy component (component diff)

focus point

• Whether the same type of strategy is the use of the original comparison, tree diff

• Not the same type, the component is determined dirty component, thereby replacing all child nodes of the entire assembly.
• For the same types of components, there may be no change in its structure, such as just content has changed, then you can use shouldComponentUpdate () return false, manually terminated diff algorithms to speed up the rendering speed

---

Optimization strategy elements (element diff)

focus point

• INSERT_MARKUP (insert)

  • The new node, you need to perform insert operation.

• MOVE_EXISTING (mobile)

  • Node itself exists, not only the position of the target position, the need for moving operation

• REMOVE_NODE (Delete)

  • The same content in different structures, can not be directly reused, need to remove the reconstruction

• Calculates, based on the unique identification key to quickly locate