JS如何实现自定义渲染器？渲染的抽象

// 一个简单的VNode结构
class VNode {
  constructor(type, props, children) {
    this.type = type; // 元素类型，如 'div', 'p', 或者一个组件
    this.props = props || {}; // 元素的属性或组件的props
    this.children = children || []; // 子节点
    // 实际的渲染器还会包含key、el（对应的真实元素）等
  }
}

document.createElement

appendChild

setAttribute

ctx.fillRect

ctx.fillText

// 宿主环境操作的抽象接口 (以DOM为例)
const domHostOperations = {
  createElement(type) {
    return document.createElement(type);
  },
  createText(text) {
    return document.createTextNode(text);
  },
  appendChild(parent, child) {
    parent.appendChild(child);
  },
  insertBefore(parent, child, anchor) {
    parent.insertBefore(child, anchor);
  },
  removeChild(parent, child) {
    parent.removeChild(child);
  },
  patchProp(el, key, prevValue, nextValue) {
    // 处理属性更新，包括事件、样式等
    if (key.startsWith('on')) {
      const eventName = key.slice(2).toLowerCase();
      if (prevValue) el.removeEventListener(eventName, prevValue);
      if (nextValue) el.addEventListener(eventName, nextValue);
    } else if (key === 'style') {
      for (const styleKey in nextValue) {
        el.style[styleKey] = nextValue[styleKey];
      }
      for (const styleKey in prevValue) {
        if (!(styleKey in nextValue)) {
          el.style[styleKey] = '';
        }
      }
    } else if (key in el) {
      el[key] = nextValue;
    } else {
      if (nextValue == null || nextValue === false) {
        el.removeAttribute(key);
      } else {
        el.setAttribute(key, nextValue);
      }
    }
  },
  setElementText(el, text) {
    el.textContent = text;
  }
  // 还有很多其他操作，比如设置SVG命名空间、处理Fragment等
};

render

patch

render

patch

function createRenderer(hostOperations) {
  const {
    createElement,
    createText,
    appendChild,
    insertBefore,
    removeChild,
    patchProp,
    setElementText
  } = hostOperations;

  function mountElement(vnode, container, anchor = null) {
    const el = vnode.el = createElement(vnode.type); // 关联真实元素
    for (const key in vnode.props) {
      patchProp(el, key, null, vnode.props[key]);
    }
    if (Array.isArray(vnode.children)) {
      vnode.children.forEach(child => mount(child, el));
    } else if (typeof vnode.children === 'string') {
      setElementText(el, vnode.children);
    }
    insertBefore(container, el, anchor);
  }

  function mountText(vnode, container, anchor = null) {
    const el = vnode.el = createText(vnode.children);
    insertBefore(container, el, anchor);
  }

  function patch(oldVnode, newVnode, container, anchor = null) {
    if (oldVnode === newVnode) return;

    if (oldVnode && !isSameVNodeType(oldVnode, newVnode)) {
      // 类型不同，直接替换
      unmount(oldVnode);
      mount(newVnode, container, anchor);
      return;
    }

    const el = newVnode.el = oldVnode.el; // 复用真实元素

    // 更新属性
    patchProps(el, newVnode.props, oldVnode.props);

    // 更新子节点
    patchChildren(oldVnode, newVnode, el);
  }

  function patchProps(el, newProps, oldProps) {
    for (const key in newProps) {
      if (newProps[key] !== oldProps[key]) {
        patchProp(el, key, oldProps[key], newProps[key]);
      }
    }
    for (const key in oldProps) {
      if (!(key in newProps)) {
        patchProp(el, key, oldProps[key], null); // 移除旧属性
      }
    }
  }

  function patchChildren(oldVnode, newVnode, container) {
    const oldChildren = oldVnode.children;
    const newChildren = newVnode.children;

    if (typeof newVnode.children === 'string') {
      if (oldChildren !== newVnode.children) {
        setElementText(container, newVnode.children);
      }
    } else if (Array.isArray(newChildren)) {
      if (Array.isArray(oldChildren)) {
        // 核心的diff算法，这里简化处理，实际生产级会复杂很多
        const commonLength = Math.min(oldChildren.length, newChildren.length);
        for (let i = 0; i < commonLength; i++) {
          patch(oldChildren[i], newChildren[i], container);
        }
        if (newChildren.length > oldChildren.length) {
          newChildren.slice(oldChildren.length).forEach(child => mount(child, container));
        } else if (oldChildren.length > newChildren.length) {
          oldChildren.slice(newChildren.length).forEach(child => unmount(child));
        }
      } else {
        setElementText(container, ''); // 清空旧文本子节点
        newChildren.forEach(child => mount(child, container));
      }
    } else { // newChildren 为 null 或 undefined
      if (Array.isArray(oldChildren)) {
        oldChildren.forEach(child => unmount(child));
      } else if (typeof oldChildren === 'string') {
        setElementText(container, '');
      }
    }
  }

  function unmount(vnode) {
    if (vnode.el && vnode.el.parentNode) {
      vnode.el.parentNode.removeChild(vnode.el);
    }
    // 递归卸载子节点等
  }

  function isSameVNodeType(n1, n2) {
    return n1.type === n2.type; // 简化判断，实际会考虑key、组件类型等
  }

  function mount(vnode, container, anchor = null) {
    const { type } = vnode;
    if (typeof type === 'string') { // 普通元素
      mountElement(vnode, container, anchor);
    } else if (type === Text) { // 文本节点
      mountText(vnode, container, anchor);
    }
    // 实际还会处理组件、Fragment、Teleport等
  }

  return {
    render(vnode, container) {
      if (vnode) {
        // 首次渲染或更新
        if (container._vnode) {
          patch(container._vnode, vnode, container);
        } else {
          mount(vnode, container);
        }
      } else if (container._vnode) {
        // 卸载
        unmount(container._vnode);
      }
      container._vnode = vnode; // 存储当前渲染的vnode
    }
  };
}

// 使用示例
const renderer = createRenderer(domHostOperations);

const vnode1 = new VNode('div', { id: 'app' }, [
  new VNode('h1', null, 'Hello Custom Renderer!'),
  new VNode('p', { style: 'color: blue;' }, 'This is a paragraph.')
]);

const vnode2 = new VNode('div', { id: 'app' }, [
  new VNode('h1', null, 'Hello World!'),
  new VNode('span', { style: 'font-weight: bold;' }, 'Updated content.')
]);

// 首次渲染
renderer.render(vnode1, document.getElementById('root'));

// 模拟更新
setTimeout(() => {
  renderer.render(vnode2, document.getElementById('root'));
}, 2000);

// 卸载
setTimeout(() => {
  renderer.render(null, document.getElementById('root'));
}, 4000);