霍春阳版

2023年08月30日

柏拉文

越努力，越幸运

一、实现

---

const render = (vnode, container) => {
    if (vnode == null) {
      if (container._vnode) {
        /**
         * @description: 新 vnode 不存在 且 旧 vnode 存在, 说明是 卸载 unmount 操作, 直接通过 innerHTML 清空容器
         */
        unmount(container._vnode);
      }
    } else {
      patch(container._vnode, vnode, container);
    }

    container._vnode = vnode;
};

二、测试

---

const renderOps = {
  createElement(tag) {
    return document.createElement(tag);
  },
  setElementText(el, text) {
    el.textContent = text;
  },
  insert(el, parent, anchor = null) {
    parent.insertBefore(el, anchor);
  }
};

const renderer = createRenderer({ ...renderOps, patchProp });

const data = reactive({ msg: 'Hello World' });

effect(() => {
  const vnode = {
    type: 'div',
    shapeFlag: 9,
    props: {
      id: 'id-div',
      style: {
        color: 'red'
      },
      class: 'class-div',
      onClick: [
        () => {
          console.log('1');
        },
        () => {
          console.log('2');
        }
      ]
    },
    children: [
      {
        type: 'h3',
        shapeFlag: 9,
        children: data.msg
      }
    ]
  };

  renderer.render(vnode, document.querySelector('#app'));
});

setTimeout(() => {
  data.msg = 'Hello World 修改';
}, 3000);