VirtualDOM的历史和未来

const divVNode = {
  type: 'div',
  props: {
    style: 'color: red'
  }
  children: ['Hello World!']
};

中的文本从 "Hello World!" 更改成 "Hello Universe!"。可以使用DOM进行强制修改：

// 
Hello World!

const div = document.createElement('div');
div.style = 'color: red';
div.textContent = 'Hello World!';

// Change from "Hello World!" to "Hello Universe!"
div.textContent = 'Hello Universe!';

但是使用VirtualDOM，我可以指定当前UI的外观（旧虚拟节点）和我希望它的外观（新虚拟节点）。

const oldVNode = {
  type: 'div',
  props: {
    style: 'color: red'
  }
  children: ['Hello World!']
};

const newVNode = {
  type: 'div',
  props: {
    style: 'color: red'
  }
  children: ['Hello Universe!']
};

然而要让Virtual DOM真正将更改应用到UI，还需要计算旧虚拟节点和新虚拟节点之间的差异。

{
  type: 'div',
  props: {
    style: 'color: red'
  }
-  children: ['Hello World!']
+  children: ['Hello Universe!']
};

当我们知道了二者之间的差别，就可以通过Virtual DOM改变UI。

div.replaceChild(newChild, oldChild);

Virtual DOM只是进行了必要的修改，并不是替换了整个UI。

构建自己的Virtual DOM

在本文中，我们将模仿Million.js的 Virtual DOM API。我们的API将包含三个主要功能：m, createElement, and patch。

m (tag, props, children)

m 函数是创建虚拟节点的辅助函数。虚拟节点包含三个属性：

• tag：将虚拟节点的名称标记为字符串；
• props：作为对象的节点的属性/属性；
• children：虚拟节点的子节点作为数组。

m帮助程序函数的示例实现如下：

const m = (tag, props = {}, children = []) => ({
  tag,
  props,
  children,
});

这样创建虚拟节点就简单多了。

m('div', { style: 'color: red' }, ['Hello World!']);

#createElement(vnode)

该createElement函数将虚拟节点转换为真实的DOM元素。这很重要，因为我们将在patch函数中使用它。

实现如下:

1. 如果虚拟节点是文本，则返回文本节点；
2. tag使用虚拟节点的属性创建一个新的DOM节点；
3. 遍历虚拟节点props 并将它们添加到DOM节点。
4. 遍历children，在每个子级上递归调用createElement并将其添加到DOM节点。

const createElement = (vnode) => {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }
  const el = document.createElement(vnode.tag);
  for (const prop in vnode.props) {
    el[prop] = vnode.props[prop];
  }
  for (const child of vnode.children) {
    el.appendChild(createElement(child));
  }
  return el;
};

这样就可以轻松地将虚拟节点转变成DOM节点。

// 
Hello World!

createElement(
  m('div', { style: 'color: red' }, ['Hello World!'])
);

#patch(el, newVNode, oldVNode)

该patch函数采用现有的DOM节点、旧的虚拟节点和新的虚拟节点。

实现如下:

1. 计算两个虚拟节点之间的差异；
2. 如果虚拟节点是字符串，则将DOM节点的文本内容替换为新节点；
3. 如果虚拟节点是对象，且tag、props、 children不同，则更新节点。

const patch = (el, newVNode, oldVNode) => {
  if (!newVNode && newVNode !== '') return el.remove();
  if (
    typeof oldVNode === 'string' ||
    typeof newVNode === 'string'
  ) {
    if (oldVNode !== newVNode) {
      return el.replaceWith(createElement(newVNode));
    }
  } else {
    if (oldVNode.tag !== newVNode.tag) {
      return el.replaceWith(createElement(newVNode));
    }

    // patch props
    for (const prop in {
      ...oldVNode.props,
      ...newVNode.props,
    }) {
      if (newVNode.props[prop] === undefined) {
        delete el[prop];
      } else if (
        oldVNode.props[prop] === undefined ||
        oldVNode.props[prop] !== newVNode.props[prop]
      ) {
        el[prop] = newVNode.props[prop];
      }
    }

    // patch children
    for (let i = oldVNode.children.length - 1; i >= 0; --i) {
      patch(
        el.childNodes[i],
        newVNode.children[i],
        oldVNode.children[i]
      );
    }

    for (
      let i = oldVNode.children.length;
      i < newVNode.children.length;
      i++
    ) {
      el.appendChild(createElement(newVNode.children[i]));
    }
  }
};

这样就可以使用patch功能更新UI了。

const oldVNode = m('div', { style: 'color: red' }, [
  'Hello World!',
]);
const newVNode = m('div', { style: 'color: red' }, [
  'Hello Universe!',
]);
const el = createElement(oldVNode);

// 
Hello World!

patch(el, oldVNode, newVNode);
// 
Hello Universe!

Virtual DOM是纯开销

当前，Virtual DOM实现在计算新旧虚拟节点之间的差异时会产生计算成本。

即使使用非常有效的差分算法 (如list-diff2)，当虚拟节点树大于虚拟节点的两位数时，差异成本也会变得显著。

树区分算法是出了名的慢。时间复杂度可以从O(n)转O(n ^ 3)取决于虚拟节点树的复杂性。这与DOM操纵相去甚远，后者是O(1)。

Virtual DOM的未来

编译器是新框架”-- 汤姆·戴尔

Ember的创建者汤姆是最早倡导为JavaScript UI库使用编译器开源狂热者之一。

现在，我们知道汤姆的赌注是正确的。JavaScript生态系统见证了Solid、Svelte等“已编译”库的兴起，它们放弃了Virtual DOM。这些库使用编译器预渲染，并在使用时生成代码来跳过不必要的渲染。

另一方面，Virtual DOM落后于这一趋势。当前的虚拟DOM库本质上与“按需” 编译器不兼容。因此，Virtual DOM的渲染速度通常是比现代“No Virtual DOM” UI库慢几个数量级。

如果我们希望Virtual DOM在未来的渲染速度上具有竞争力，那就需要重新设计Virtual DOM以允许编译器增强。

当前名称：VirtualDOM的历史和未来
分享URL：http://www.shufengxianlan.com/qtweb/news27/41177.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联