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

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

document.createElement

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等 };

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);