The React framework implementation can be divided into two parts

One part is called reconciliation and the other part is called Rendering. Through these two parts, React replaces redundant and expensive DOM operations with increasingly cheap computing costs to improve the performance of the entire Web app.

Reconciliation (harmony)

The React component uses the Virtual DOM returned by each render method to notify React of the result to be rendered. React compares the values returned by the first and second render methods (diff). Find out the difference, and if the Rendering is different, hand the result to the Rendering section, and only update the Rendering precisely to reduce the DOM manipulation. Then the new question arises: how does reconciliation find out the difference between the two render sequences? It is simply a comparison between two nodes of the Virtual DOM tree. However, even though the cost of hardware has become higher and higher, and the cost of computation has become lower and lower, it is still not desirable to perform traversal comparison between two trees (the complexity of traditional diff algorithm reaches O(n^3)). React Diff reduces the complexity of the Diff algorithm from O(n^3) to O(n) by using the following methods:

  1. Just peer comparison,
  2. React components of different classes are completely replaced as completely different DOM structures
  3. Key prop: Developers can signal that React is the same DOM structure by giving the Virtual DOM a unique key property, or treat React as a completely different DOM structure if the key value is different.
Rendering (Rendering)

When Reconciliation is complete, the results of the comparison are handed to the Rendering section, which converts them into corresponding DOM operations to update the page.