2021-03-09 dom-diff - 02

patch的实现

// patch.js

/**
 * 对比新老节点, 并且将老节点的值和属性, 都替换成为新节点的属性和值
 * @param {Object} oldVnode 旧的虚拟节点
 * @param {Object} newVnode 新的虚拟节点
 */
function patch(oldVnode, newVnode) {
  // 1. 新老节点的类型不太一样, 新节点直接替换老的节点
  if (oldVnode.type !== newVnode.type) {
    return oldVnode.domElement.parentNode.replaceChild(
      createDomElementFromVnode(newVnode),
      oldVnode.domElement
    )
  }
  // 1. 类型相同且是文本类型,  hello-world
  if (oldVnode.text) {
    if (newVnode.text === oldVnode.text) {
      return;
    }
    return oldVnode.domElement.textContent = newVnode.text;
  }

  // 2. 类型一样, 且是标签类型, 需要根据新节点的属性 来更新节点的属性
  // 距离: h('div'. { id: '1', style: { color: red } }, 'text')   => h('div', { name: 2, title: 3 }, 'hello world')
  const domElement = newVnode.domElement = oldVnode.domElement;

  // 将新节点的属性和老属性进行对比, 进行属性的挂载和删除
  updateProperties(newVnode, oldVnode.props);  // (根据最新的节点来更新属性)

  // 3. 比较children节点
  const oldChildren = oldVnode.children || [];
  const newChildren = newVnode.children || [];

  // 3.1 老节点存在 children节点, 新的也有children节点
  if (oldChildren.length && newChildren.length) {
    // 对比儿子节点
    updateChildren(domElement, oldChildren, newChildren);
  }

  // 3.2 老节点存在children节点, 新的节点不存在
  else if (oldChildren.length) {
    domElement.innerHTML = '';
  } else if (newChildren.length) {
    for (let i = 0; i < newChildren.length; i += 1) {
      const realChildDomElement = createDomElementFromVnode(newChildren[i]); // 将虚拟节点变成真实的dom节点
      domElement.appendChild(realChildDomElement);
    }
  }

  // 3.3 老节点不存在children节点, 但是新的节点存在children节点
}

/**
 * 比较两个虚拟节点的key和type是否相同
 * @param {Vnode} oldVnode 旧节点 
 * @param {Vnode} newVnode 新节点
 * @returns {boolean} 返回两个节点的key和type是否都是一致
 */
function isSameVnode(oldVnode, newVnode) {
  return oldVnode.key === newVnode.key && oldVnode.type === newVnode.type;
}

/**
 * 对比新旧子节点, 并在parent真实节点中进行替换
 * @param {HTMLElement} parent 父真实节点
 * @param {Array<vnode>} oldChildren 旧的children虚拟节点
 * @param {Array<vnode>} newChildren 新的children虚拟节点
 */
function updateChildren(parent, oldChildren, newChildren)  {
  // 最复杂的就是列表
  /**
    h('div', {}, 
      h('li', { style: { color: "red" }, key: 'A' }, 'A'),
      h('li', { style: { color: "yellow" }, key: 'B' }, 'B'),
      h('li', { style: { color: "blue" }, key: 'C' }, 'C'),
      h('li', { style: { color: "green" }, key: 'D' }, 'D')
    )
    => 更新后
    h('div', {}, 
      h('li', { style: { color: "yellow" }, key: 'A', id: 'a1' }, 'A1'),
      h('li', { style: { color: "blue" }, key: 'B' }, 'B1'),
      h('li', { style: { color: "green" }, key: 'C' }, 'C1'),
      h('li', { style: { color: "red" }, key: 'D' }, 'D1'),
      h('li', { style: { color: "orange" }, key: 'E' }, 'E1')
    )
  
  **/

  // 对常见的dom 操作做优化
  // 1. 前后, 追加 push, unshift
  // 2. 正序倒序

  // 旧节点 头部指针
  let oldStartIndex = 0;
  // 旧节点 头部节点
  let oldStartVnode = oldChildren[oldStartIndex];

  // 旧节点 尾部指针
  let oldEndIndex = oldChildren.length - 1;
  // 旧节点 尾部节点
  let oldEndVnode = oldChildren[oldEndIndex];

  // 旧节点 头部指针
  let newStartIndex = 0;
  // 旧节点 头部节点
  let newStartVnode = newChildren[newStartIndex];

  // 旧节点 尾部指针
  let newEndIndex = newChildren.length - 1;
  // 旧节点 尾部节点
  let newEndVnode = newChildren[newEndIndex];

  // 1. 判断 oldChildren和newChildren 循环的时候, 谁先结束就停止循环
  while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
    // 判断是否是同一个节点, 从头部开始比较
    if (isSameVnode(oldStartVnode, newStartVnode)) {
      // 主要是做属性更新的操作和子文本节点
      patch(oldStartVnode, newStartVnode);
      oldStartIndex += 1;
      newStartIndex += 1;
      oldStartVnode = oldChildren[oldStartIndex];
      newStartVnode = newChildren[newStartIndex];
    } else if (isSameVnode(oldEndVnode, newEndVnode)) { // 如果头部不相同, 从尾部开始比较
      patch(oldEndVnode, newEndVnode);
      oldEndIndex -= 1;
      newEndIndex -= 1;
      oldEndVnode = oldChildren[oldEndIndex];
      newEndVnode = newChildren[newEndIndex];
    }
  }

  // 2. 表示有新的节点, 需要追加在尾部
  if (newStartIndex <= newEndIndex) {
    for (let i = newStartIndex; i <= newEndIndex; i += 1) {
      // const appendElement = createDomElementFromVnode(newChildren[i]);
      // parent.appendChild(appendElement);

      // 头部插入时: newEndIndex表示当前新节点中 [A,B,C,D] => [E,F,A,B,C,D]
      //      A,B,C,D
      //    F,A,B,C,D
      // newEndIndex代表的是 新节点中A的索引为1, newStartIndex此时仍然为0
      const beforeVnode = newChildren[newEndIndex + 1];
      const beforeElement = null;
      if (!beforeVnode) {
        // 表示是尾部追加
      } else {
        // 表示是头部追加
        beforeElement = beforeVnode.domElement;
      }

      // 主要考虑的是 头部比较和尾部比较的添加问题
      parent.insertBefore(
        createDomElementFromVnode(newChildren[i]),
        beforeElement
      );
    }
  }

  // 3. 表示头部有新节点, 需要追加在头部
}

调用

import { h, patch, render } from './vdom/index';

const list1 = h('ul',
  {}, 
  h('li', { style: { color: "red" }, key: 'A' }, 'A'),
  h('li', { style: { color: "yellow" }, key: 'B' }, 'B'),
  h('li', { style: { color: "blue" }, key: 'C' }, 'C'),
  h('li', { style: { color: "green" }, key: 'D' }, 'D')
);
const list2 = h(
  "ul",
  {},
  // 头部添加数据的时候, 从尾部开始比较
  h("li", { style: { color: "orange" }, key: "Z", id: "z1" }, "Z1"),
  h("li", { style: { color: "yellow" }, key: "A", id: "a1" }, "A1"),
  h("li", { style: { color: "blue" }, key: "B" }, "B1"),
  h("li", { style: { color: "green" }, key: "C" }, "C1"),
  h("li", { style: { color: "red" }, key: "D" }, "D1")
  // 尾部添加数据的时候, 从头部开始比较
  // h("li", { style: { color: "orange" }, key: "E" }, "E1")
);

// 渲染 render: 将虚拟节点转换成为真实的dom节点, 最后插入到app元素中
render(list1, document.getElementById("app"));

setTimeout(() => {
  // 比对新老节点
  patch(list1, list2);
}, 2000);

// $mount

/**
 * <div id="container"><span style="color:red">hello</span>dom diff</div>
    h(
      'div',
      {
        key: 'keyCode',
        id: 'container'
      },
      h(
        'span',
        { style: { color: 'red' } },
        'hello'
      ),
      'dom diff'
    )
    
    生成的虚拟节点对象
    {
      type: 'div',
      props: { id: 'container' },
      children: [
        {
          type: 'span',
          props: {
            style: {
              color: red
            }
          },
          children: [],
          text: 'hello'
        },
        {
          type: '',
          props: {},
          children: [],
          text: 'dom diff'
        }
      ]
    }
 */