This article abstractly compares the diFF algorithm of the two frameworks. There is time for in-depth study of the react Diff algorithm logic, otherwise it will not be understood deeply

React and Vue will be compared from various angles in the follow-up. Besides this article, the existing ones are as follows:

React and Vue communicate

React and Vue life cycles

React and Vue hook functions

The virtual DOM object contains the following properties:

  • Sel: selector
  • Data: binding data (attribute/props/eventlistner/class/the dataset/hook)
  • Children: array of child nodes
  • Text: indicates the current text node content
  • Elm: A reference to a real DOM element
  • Key: Used to optimize DOM operations

The diff algorithm compares variables

Vue maintains four variables:

  • OldStartIdx => Old header index
  • OldEndIdx => Old tail index
  • NewStartIdx => New header index
  • NewEndIdx => New tail index

Compare both directions at the same time to obtain the real DOM from the new position; If the old one goes first, add it; If the new one runs out first, delete it

React maintains three variables:

  • NextIndex => index when traversing nextChildren, increment 1 for each element traversed (traversing new node)
  • LastPlacedIndex => Last time the element was removed from prevChildren, the element was in prevChildren’s index (new node)
  • OldIndex => Position of the element in the array (the position of the old node)

The node must be moved if oldIndex < lastPlacedIndex

Principles of movement:

  • The first node (the new node) does not move (unless it is to be removed). With that node as the origin, all other nodes go to find their new location.
  • Move the original element to the right, controlled by lastIndex. Anything to the left of lastIndex, it moves to the right of lastIndex; The one to the right of lastIndex, I don’t need to move.

NextIndex: Iterate to the right, gradually +1

OldIndex: Finds the corresponding element in the old node according to nextIndex, if oldIndex and lastPlacedIndex can be found, otherwise add

LastPlacedIndex: a comparison guide. When a move occurs, lastPlacedIndex remains the value of the previous comparison and oldIndex is used instead of moving

OldIndex = 4 > lastPlacedIndex No operation, and lastPlacedIndex = oldIndex = 4

OldIndex = 0 < lastPlacedIndex moves, lastPlacedIndex remains unchanged

Diff algorithm comparison mode

  1. Vue compares lists from both ends to the middle, while React compares lists from left to right. When a set simply moves the last node to the first, React moves the preceding nodes in sequence, while Vue moves only the last node to the first. In general, VUE’s comparison approach is more efficient.

  2. Vue compares nodes. When nodes have the same element type but different classnames, they are considered to be different types of elements and are deleted and reconstructed. React considers nodes of the same type and only modifies node attributes

React only compares node types and keys

function sameVnode(vnode1: VNode, vnode2: VNode) :boolean {
  return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
}
Copy the code

Vue compares node types and keys, as well as attributes

function sameVnode (a, b) {
  return (
    a.key === b.key &&  / / key values
    a.tag === b.tag &&  / / tag name
    a.isComment === b.isComment &&  // Whether it is a comment node
    // Whether data is defined, data contains some specific information, such as onclick, style
    isDef(a.data) === isDef(b.data) &&  
    sameInputType(a, b) // When the tag is , the type must be the same)}Copy the code

Diff algorithm traversal principle

  1. React is fixed in the first place except delete, and then iterate through the comparison;

  2. The optimize in Vue’s compile phase marks the static point to reduce the Differ count, and is bidirectly-traversed.

Diff algorithm and new DOM logic

  1. Vue is based on the SNabbDOM library, which has a good speed and module mechanism. Vue Diff uses a bidirectional linked list to compare and update the DOM.

  2. React mainly uses the DIff queue to store the DOM to be updated, obtain the patch tree, and then update the DOM in batches in a unified operation.

The same

  1. Virtual DOM only compares nodes at the same level, and the complexity is O(n), which reduces the algorithm complexity.

  2. Both use keys to compare whether the nodes are the same, both in order to reuse as many nodes as possible

  3. The virtual DOM is used to minimize manipulation of the real DOM to improve performance (in fact, the advantage of the virtual DOM is not that it is fast to manipulate DOM)

  4. Do not use index as key

www.sohu.com/a/406399943…

Juejin. Cn/post / 684490…

Juejin. Cn/post / 684490…

Juejin. Cn/post / 684490…