@a-ignatov-parc/virtual-dom 中文文档教程

Question

virtual-dom

一个 JavaScript DOM 模型，支持元素创建，diff计算和补丁操作以实现高效的重新渲染

Motivation

手动 DOM 操作是混乱的并且跟踪以前的 DOM 状态很难。 这个问题的解决方案是在编写代码时就好像在状态发生变化时重新创建整个 DOM 一样。 当然，如果每次应用程序状态更改时您实际上都重新创建了整个 DOM，那么您的应用程序会非常慢并且您的输入字段会失去焦点。

virtual-dom 是一组模块，旨在为您的应用程序提供一种表示 DOM 的声明方式。 因此，无需在应用程序状态更改时更新 DOM，您只需创建一个虚拟树或 VTree，它看起来像您想要的 DOM 状态。 virtual-dom 将弄清楚如何在不重新创建所有 DOM 节点的情况下有效地使 DOM 看起来像这样。

virtual-dom 允许您在状态发生变化时更新视图，方法是创建视图的完整 VTree，然后有效地修补 DOM 以使其看起来与您描述的完全一样。 这导致将手动 DOM 操作和以前的状态跟踪保留在您的应用程序代码之外，从而促进 Web 应用程序的干净和可维护的呈现逻辑。

Example

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');

// 1: Create a function that declares what the DOM should look like
function render(count)  {
    return h('div', {
        style: {
            textAlign: 'center',
            lineHeight: (100 + count) + 'px',
            border: '1px solid red',
            width: (100 + count) + 'px',
            height: (100 + count) + 'px'
        }
    }, [String(count)]);
}

// 2: Initialise the document
var count = 0;      // We need some app data. Here we just store a count.

var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document

// 3: Wire up the update logic
setInterval(function () {
      count++;

      var newTree = render(count);
      var patches = diff(tree, newTree);
      rootNode = patch(rootNode, patches);
      tree = newTree;
}, 1000);

在 RequireBin 上查看

Documentation

您可以找到单独组件的文档 在他们的自述文件中

• For create-element.js see the vdom README
• For diff.js see the vtree README
• For h.js see the virtual-hyperscript README
• For patch.js see the vdom README

，有关这些模块的类型签名的信息感觉 免费阅读 javascript 签名定义

DOM model

virtual-dom 公开了一组设计用于表示 DOM 节点的对象。 “文档对象模型模型”似乎是一个奇怪的术语，但它确实如此。 它是一个原生的 JavaScript 树结构，代表了一个原生的 DOM 节点树。 我们称之为 VTree

我们可以直接以冗长的方式使用对象创建 VTree，或者我们可以使用更简洁的 virtual-hyperscript。

Example - creating a VTree using the objects directly

var VNode = require('virtual-dom/vnode/vnode');
var VText = require('virtual-dom/vnode/vtext');

function render(data) {
    return new VNode('div', {
        className: "greeting"
    }, [
        new VText("Hello " + String(data.name))
    ]);
}

module.exports = render;

Example - creating a VTree using virtual-hyperscript

var h = require('virtual-dom/h');

function render(data) {
    return h('.greeting', ['Hello ' + data.name]);
}

module.exports = render;

DOM 模型旨在高效地创建和读取。 我们不只是创建一个真正的 DOM 树的原因是创建 DOM 节点和读取节点属性是一个昂贵的操作，这是我们试图避免的。 读取一些 DOM 节点属性甚至会产生副作用，因此用真实的 DOM 节点重新创建整个 DOM 结构根本不适合高性能渲染，而且也不容易推理。

VTree 被设计为等同于不可变数据结构。 虽然它实际上不是不可变的，但您可以在多个地方重用节点，并且我们公开的将 VTrees 作为参数的函数永远不会改变树。 我们可以冻结模型中的对象，但不是为了效率。 （不可变等效数据结构的好处将在某些时候记录在 vtree 或博客文章中）

Element creation

createElement(tree:VTree) -> DOMNode

鉴于我们已经创建了一个 VTree，我们需要一些方法将其转换为真正的 DOM 树某种。 这是由 create-element.js 提供的。 首次渲染时，我们会将完整的 VTree 传递给 create-element 函数以创建等效的 DOM 节点。

Diff computation

diff(previous:VTree, current:VTree) -> PatchObject

virtual-dom 背后的主要动机是允许我们编写独立于先前状态的代码。 因此，当我们的应用程序状态发生变化时，我们将生成一个新的 VTree。 diff 函数创建一组 DOM 补丁，这些补丁基于之前的 VTree 和当前的 VTree 之间的差异，将更新之前的 DOM树以匹配新的 VTree。

Patch operations

patch(rootNode:DOMNode, patches:PatchObject) -> DOMNode newRootNode

一旦我们计算出应用到 DOM 所需的补丁集，我们就需要一个可以应用这些补丁的函数。 这是由 patch 函数提供的。 给定一个 DOM 根节点和一组 DOM 补丁，patch 函数将更新 DOM。 将补丁应用到 DOM 后，DOM 应该看起来像新的 VTree。

Original motivation

virtual-dom 深受 facebook 的 React 内部工作原理的启发。 这个项目起源于一个想法的要点，我们已将其链接以提供一些背景信息。

Tools

• html2hscript - Parse HTML into hyperscript
• html2hscript.herokuapp.com - Online Tool that converts html snippets to hyperscript
• html2hyperscript - Original commandline utility to convert legacy HTML markup into hyperscript