面试题：如何实现一个虚拟 DOM？

虚拟 DOM（Virtual DOM）是一种用于优化 DOM 操作的技术。它通过在内存中维护一个轻量级的 JavaScript 对象树（即虚拟 DOM），与真实的 DOM 树进行对比，找出差异并最小化更新真实 DOM 的操作。以下是实现一个简单虚拟 DOM 的基本思路和步骤：

1. 虚拟 DOM 的基本结构

虚拟 DOM 是一个 JavaScript 对象，用于描述真实 DOM 的结构。每个虚拟 DOM 节点通常包含以下属性：

type：节点类型（如 div、span 等）。
props：节点的属性（如 class、style 等）。
children：子节点（可以是字符串、虚拟 DOM 节点或数组）。

示例：

const vnode = {
  type: 'div',
  props: {
    className: 'container',
    style: 'color: red;',
  },
  children: [
    'Hello, ',
    {
      type: 'span',
      props: {},
      children: ['Virtual DOM'],
    },
  ],
};

2. 创建虚拟 DOM

实现一个函数，用于创建虚拟 DOM 节点。

示例：

function createElement(type, props, ...children) {
  return {
    type,
    props: props || {},
    children: children.flat(), // 扁平化子节点数组
  };
}

// 使用示例
const vnode = createElement(
  'div',
  { className: 'container', style: 'color: red;' },
  'Hello, ',
  createElement('span', {}, 'Virtual DOM')
);

3. 渲染虚拟 DOM 到真实 DOM

实现一个函数，将虚拟 DOM 节点渲染为真实 DOM 节点。

示例：

function render(vnode, container) {
  if (typeof vnode === 'string') {
    // 如果 vnode 是字符串，直接创建文本节点
    container.appendChild(document.createTextNode(vnode));
    return;
  }

  // 创建真实 DOM 节点
  const el = document.createElement(vnode.type);

  // 设置属性
  for (const [key, value] of Object.entries(vnode.props)) {
    if (key === 'className') {
      el.className = value; // 处理 className
    } else {
      el.setAttribute(key, value); // 设置其他属性
    }
  }

  // 递归渲染子节点
  vnode.children.forEach((child) => render(child, el));

  // 将节点添加到容器中
  container.appendChild(el);
}

// 使用示例
const vnode = createElement(
  'div',
  { className: 'container', style: 'color: red;' },
  'Hello, ',
  createElement('span', {}, 'Virtual DOM')
);

render(vnode, document.getElementById('app'));

4. 比较虚拟 DOM 并更新真实 DOM

实现一个函数，比较新旧虚拟 DOM 的差异，并更新真实 DOM。

示例：

function diff(oldVNode, newVNode) {
  // 如果节点类型不同，直接替换
  if (oldVNode.type !== newVNode.type) {
    return (parent) => {
      parent.removeChild(parent.firstChild);
      render(newVNode, parent);
    };
  }

  // 更新属性
  const patchProps = (el) => {
    const oldProps = oldVNode.props || {};
    const newProps = newVNode.props || {};

    // 添加或更新属性
    for (const [key, value] of Object.entries(newProps)) {
      if (oldProps[key] !== value) {
        if (key === 'className') {
          el.className = value;
        } else {
          el.setAttribute(key, value);
        }
      }
    }

    // 删除旧属性
    for (const key in oldProps) {
      if (!(key in newProps)) {
        el.removeAttribute(key);
      }
    }
  };

  // 更新子节点
  const patchChildren = (el) => {
    const oldChildren = oldVNode.children || [];
    const newChildren = newVNode.children || [];
    const maxLen = Math.max(oldChildren.length, newChildren.length);

    for (let i = 0; i < maxLen; i++) {
      diff(oldChildren[i], newChildren[i])(el);
    }
  };

  return (parent) => {
    const el = parent.firstChild;
    patchProps(el);
    patchChildren(el);
  };
}

// 使用示例
const oldVNode = createElement('div', { className: 'container' }, 'Hello');
const newVNode = createElement('div', { className: 'container' }, 'Hello, Virtual DOM');

const patch = diff(oldVNode, newVNode);
patch(document.getElementById('app'));

5. 完整的虚拟 DOM 实现

将上述功能整合为一个完整的虚拟 DOM 实现。

示例：

function createElement(type, props, ...children) {
  return {
    type,
    props: props || {},
    children: children.flat(),
  };
}

function render(vnode, container) {
  if (typeof vnode === 'string') {
    container.appendChild(document.createTextNode(vnode));
    return;
  }

  const el = document.createElement(vnode.type);

  for (const [key, value] of Object.entries(vnode.props)) {
    if (key === 'className') {
      el.className = value;
    } else {
      el.setAttribute(key, value);
    }
  }

  vnode.children.forEach((child) => render(child, el));
  container.appendChild(el);
}

function diff(oldVNode, newVNode) {
  if (oldVNode.type !== newVNode.type) {
    return (parent) => {
      parent.removeChild(parent.firstChild);
      render(newVNode, parent);
    };
  }

  const patchProps = (el) => {
    const oldProps = oldVNode.props || {};
    const newProps = newVNode.props || {};

    for (const [key, value] of Object.entries(newProps)) {
      if (oldProps[key] !== value) {
        if (key === 'className') {
          el.className = value;
        } else {
          el.setAttribute(key, value);
        }
      }
    }

    for (const key in oldProps) {
      if (!(key in newProps)) {
        el.removeAttribute(key);
      }
    }
  };

  const patchChildren = (el) => {
    const oldChildren = oldVNode.children || [];
    const newChildren = newVNode.children || [];
    const maxLen = Math.max(oldChildren.length, newChildren.length);

    for (let i = 0; i < maxLen; i++) {
      diff(oldChildren[i], newChildren[i])(el);
    }
  };

  return (parent) => {
    const el = parent.firstChild;
    patchProps(el);
    patchChildren(el);
  };
}

// 使用示例
const oldVNode = createElement('div', { className: 'container' }, 'Hello');
const newVNode = createElement('div', { className: 'container' }, 'Hello, Virtual DOM');

render(oldVNode, document.getElementById('app'));
setTimeout(() => {
  const patch = diff(oldVNode, newVNode);
  patch(document.getElementById('app'));
}, 1000);