Compare the diff algorithm of react and vue

Recently, from the use of vue to the use of react,

I have studied the diff algorithm of vue before, and I took a leisurely look at the diff source code of react and write some insights.

1. Vue's diff algorithm

The diff algorithm occurs on the virtual dom

Determine whether the same node: selector and key must be the same

diff rules:

1. Only compare nodes in the same layer, and do not compare different layers. Delete the original node, and insert a new update node (rarely encountered in actual development)
2. The old and new nodes are nodes at the same level, but not the same node, so no detailed comparison is made. Delete the original node, and insert a new update node (rarely encountered in actual development)
3. The old and new nodes are nodes in the same layer and the same node, so a detailed comparison is required

Diff's refined comparison strategy

1. New head child node, old head child node
2. New tail child node, old tail child node
3. New tail child node, old head child node
4. New head child node, old tail child node

If condition 1 is met, the head pointer of the new and old nodes is moved backward.

If condition 2 is met, the tail pointers of the new and old nodes move forward. Judge whether the new child node is looped first (the head and tail position pointer is judged), yes: the node is deleted, no: the new node is added, the new node is added according to condition 4

If condition 3 is met, the new head child node needs to be moved behind the old tail child node

If condition 4 is met, the new head child node needs to be moved to the front of the old head child node

If none of the 4 types are matched, and the pointer condition is not met, loop matching is required

Vue is setting the moved node and the matched node to undefined

2. React's diff algorithm

Compare from left to right, use the index of the element to compare with the lastIndex, if the index <lastIndex is satisfied, move the element, delete and add according to the rules respectively.

No cross-layer comparison, same layer comparison, same as vue

diff strategy

The position of the new node is lastIndex, and the position of the old node is index. Read the node index from the new node in turn, compare the old node data index

1. Does not meet the condition of index <lastIndex, do not move; meets the condition of index <lastIndex, move the node.
2. Each comparison needs to be reset to the larger number in lastIndex=(index,lastIndex)
3. The moved node is behind the previously operated node
4. If the node obtained from the new node set is not found in the old node set, it is added, and lastIndex is the last value unchanged
5. If the new node set is traversed, the old node still has value is deleted, and the loop is deleted.

The most disgusting case: If you move the last element to the front, React will move the nodes backwards in turn

3. Contrast

Similarities: The diff algorithms of vue and react do not perform cross-level comparisons, but only compare at the same level.

difference:

1. Vue will patch the operated node in the patch function (undefined), which is more clear when diffing
2. Vue compares nodes. When the node element type is the same but the className is different, it is considered to be a different type of element, and it is deleted and recreated; while react is considered to be a node of the same type and is modified.
3. diff strategy, vue's performance is better than react