Diff fine comparison between the new virtual DOM and the old virtual DOM is conducted to figure out how to update the new virtual DOM to the minimum and finally reflect the real DOM.

  • The key is important, the key is the unique identifier of the node that tells the Diff algorithm that they are the same node before and after the change;
  • A fine comparison is performed only when the virtual node is the same. Otherwise, the old node will be removed and a new node will be inserted.
  • So the question comes, what is the same virtual node, answer: the selector is the same and the key is the same.
  • Diff algorithm will only compare the same layer, not across layers, even if it is the same virtual node, but across layers, sorry, DIff will not compare, only violent demolition of the old, insert new;

A virtual node contains the following attributes:

{
    children:undefined.// The included child node undefined means there are no byte points
    data: {},// Attributes that this node contains
    elm:undefined.// The corresponding real DOM node name is undefined, which means it is not displayed in the browser
    key:undefined.// The only value in the real DOM key undefined means there is no key
    sel:"div".// The current DOM name
    text:'I am a box'    // Text information in this node
}
Copy the code

There are several important functions in it:

Focus on h function and patch function

import { init } form 'snabbdom/init';
import { classModule } form 'snabbdom/module/class';
import { propsModule } form 'snabbdom/module/props';
import { styleModule } form 'snabbdom/module/style';
import { eventListenersModule } form 'snabbdom/module/eventlistenersModulers';
import { h } from 'ansbbdom/h';
The patch function is the core function of the DIff algorithm
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);
 
// Create a virtual node
// arguments to function h: h(' label name ',' attribute ',' internal value ')
const vnode1 = h{'a', {
     props: {
        href: 'https://baidu.com';
        target: '_blank'}},"Baidu"}
 
// The patch function takes two arguments: the first argument (dom node); Second parameter: (vnode) Virtual node
// Put the virtual node on the tree
// Create the container first
const container = document.getElementById('container');
patch(container, vnode1)
Copy the code

H functions can be nested to produce a virtual DOM tree

//1: Nested functions like this
h('ul',{}, [
   h('li', {}, 'milk'),  The h function is used to create a vnode
   h('li', {}, 'coffee'),
   h('li', {}, 'coke'),])// 2: Get this virtual DOM tree
{
  "sel": "ul"."data": {},
  "children": {{se:"li".text: "Milk" },
     { se:"li".text: "Coffee" },
     { se:"li".text: "Coke"}}}/ / h function
const vnode3 = h('ul', [
   h('li', {}, 'apple'),
   h('li'.'watermelon'),
   h('li', [
     h('div', [
       h('p'.'11111'),
       h('p'.'22222'),
     ])
   ])
  h('li', h('p'.'hawthorn'.)))Copy the code

Why key

If you don’t add key, it will be reshuffled and rerendered when you add E in front of it. If a key is added, diff will directly find the node where key=’E’ and the other nodes will not move, thus completing the minimal update.