Analysis and summary of React diff algorithm

Original: https://zhuanlan.zhihu.com/p/20346379

Summarize what the individual understands after reading:

1, Tree diff: Only the same level of the node comparison, if the subtree in the new tree species does not exist, then directly deleted. If the new tree is created, what if a cross-hierarchical tree is moved? The answer is to delete the tree immediately before moving, creating an identical one after the move.

So try not to move across the hierarchy as much as possible in react.

2. Component diff: If it is the same component, continue comparing the virtual DOM tree. If not, delete the entire component directly and replace it with the same component

3. Element diff: There is a move, create and delete operation, this needless to say directly what meaning. Detailed algorithm details can be seen in the original, here do not delve into.

Analysis and summary of React diff algorithm