虚拟DOM和Diff算法--6（手写子节点更新策略）

2023-12-08 09:35:03

在之前的文章中，我们介绍了虚拟DOM和Diff算法的基础知识，以及如何使用框架提供的API来更新虚拟DOM。在本文中，我们将介绍如何手写子节点更新策略，通过手写更新策略，我们将逐步理解框架内部更新策略的原理，对后续更深入理解框架的源码会有很大的帮助。

手写子节点更新策略

为了手写子节点更新策略，我们需要首先了解虚拟DOM的结构。虚拟DOM是一个树形结构，每个节点都有一个type属性，表示节点的类型，可以是元素节点、文本节点或注释节点。元素节点还有其他属性，如tag、props和children，其中children是一个数组，包含了该元素节点的所有子节点。

现在，我们来看一下如何手写子节点更新策略。首先，我们需要比较新旧虚拟DOM的子节点，找出哪些子节点被添加、删除或更新了。然后，我们需要根据这些变化，更新真实DOM。

具体来说，我们可以按照以下步骤来实现手写子节点更新策略：

比较新旧虚拟DOM的子节点，找出哪些子节点被添加、删除或更新了。
如果有子节点被添加，则在真实DOM中创建对应的节点并将其添加到父节点中。
如果有子节点被删除，则从真实DOM中删除对应的节点。
如果有子节点被更新，则更新真实DOM中对应节点的属性或内容。

举个例子

为了更好地理解手写子节点更新策略，我们来看一个简单的例子。假设我们有一个虚拟DOM如下：

<div>
  <p>Hello world!</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

现在，我们更新虚拟DOM，使其变成如下所示：

<div>
  <p>Hello world!</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

我们可以看到，新旧虚拟DOM之间的差异在于，新虚拟DOM中多了一个<li>Item 3</li>节点。因此，我们需要在真实DOM中添加一个<li>Item 3</li>节点。

我们可以按照以下步骤来实现这个更新：

比较新旧虚拟DOM的子节点，找出哪些子节点被添加、删除或更新了。

const oldChildren = oldVirtualDOM.children;
const newChildren = newVirtualDOM.children;

const addedChildren = [];
const removedChildren = [];
const updatedChildren = [];

for (let i = 0; i < newChildren.length; i++) {
  const newChild = newChildren[i];
  const oldChild = oldChildren.find((child) => child.key === newChild.key);

  if (!oldChild) {
    addedChildren.push(newChild);
  } else if (oldChild.type !== newChild.type || oldChild.props !== newChild.props) {
    updatedChildren.push(newChild);
  }
}

for (let i = 0; i < oldChildren.length; i++) {
  const oldChild = oldChildren[i];
  const newChild = newChildren.find((child) => child.key === oldChild.key);

  if (!newChild) {
    removedChildren.push(oldChild);
  }
}

如果有子节点被添加，则在真实DOM中创建对应的节点并将其添加到父节点中。

for (let i = 0; i < addedChildren.length; i++) {
  const newChild = addedChildren[i];
  const newDOMNode = createDOMNode(newChild);
  const parentDOMNode = document.querySelector(`#${newChild.parent}`);
  parentDOMNode.appendChild(newDOMNode);
}

如果有子节点被删除，则从真实DOM中删除对应的节点。

for (let i = 0; i < removedChildren.length; i++) {
  const oldChild = removedChildren[i];
  const oldDOMNode = document.querySelector(`#${oldChild.id}`);
  oldDOMNode.parentNode.removeChild(oldDOMNode);
}

如果有子节点被更新，则更新真实DOM中对应节点的属性或内容。

for (let i = 0; i < updatedChildren.length; i++) {
  const updatedChild = updatedChildren[i];
  const updatedDOMNode = document.querySelector(`#${updatedChild.id}`);
  updateDOMNode(updatedDOMNode, updatedChild);
}