一文读懂手写简易前端框架之 patch 更新

2024-01-03 00:51:20







**一、前言** 

在前两篇文章中，我们已经实现了 VDOM 的渲染和 JSX 的编译，并实现了函数组件和类组件。在本篇文章中，我们将实现 patch 更新。能够做 VDOM 的渲染和更新，支持组件（props、state），支持生命周期函数，基本可以支撑起一个简易的前端框架了。

**二、patch 更新原理** 

patch 更新的核心思想是 diff 算法。diff 算法是一种比较两个对象之间差异的算法，它可以快速地找出两个对象之间不同的属性，从而只更新发生变化的属性，而不需要重新渲染整个组件。

**三、patch 更新的具体步骤** 

1. 首先，我们需要将虚拟 DOM 和真实 DOM 进行比较，找出发生变化的属性。
2. 然后，我们需要根据发生变化的属性，更新真实 DOM。
3. 最后，我们需要调用组件的生命周期函数，以便组件能够感知到更新。

**四、patch 更新的代码示例** 

```javascript
function patch(oldVNode, newVNode) {
  // 比较新旧虚拟 DOM 的差异
  const patches = diff(oldVNode, newVNode);

  // 根据差异更新真实 DOM
  patchVNode(oldVNode, patches);

  // 调用组件的生命周期函数
  if (newVNode.componentInstance) {
    newVNode.componentInstance.componentDidUpdate();
  }
}

function patchVNode(vnode, patches) {
  // 更新属性
  for (const key in patches) {
    const patch = patches[key];
    if (patch.type === 'ATTR') {
      vnode.elm.setAttribute(patch.key, patch.value);
    }
  }

  // 更新子节点
  for (const key in patches) {
    const patch = patches[key];
    if (patch.type === 'CHILD') {
      const newVNode = patch.value;
      const oldVNode = vnode.elm.childNodes[patch.index];
      patchVNode(oldVNode, newVNode);
    }
  }

  // 删除节点
  for (const key in patches) {
    const patch = patches[key];
    if (patch.type === 'REMOVE') {
      vnode.elm.removeChild(vnode.elm.childNodes[patch.index]);
    }
  }
}