本文档特意编写在 ReactJS/Rendering-Elements 文章附近，以突出与 ReactJS 的异同。

Rendering Elements

Reactor 的虚拟 DOM 元素是真实 DOM 元素的定义。在某些时候，将使用虚拟 DOM 元素作为原型创建真正的 DOM 元素。

const velement = <h1>Hello, world</h1>;

与物理 DOM 元素不同，Reactor 元素是纯脚本数组文本，创建成本低廉。专用的 Sciter 的 DOM 方法负责更新 DOM 以匹配此类虚拟元素。

Rendering an Element into the DOM

假设您的 HTML 文件中有一个 <div> 位置：

<div id="root"></div>

我们称之为“根”DOM节点 - 它里面的所有内容都将由Reactor管理。

使用 Reactor 的应用程序可能具有多个孤立的根 DOM 节点作为单个根 DOM 节点 - 无论需要什么。您可以将 Reactor 管理的元素与通过其他方式管理的元素混合使用，例如编写行为类脚本。

要将 Reactor 元素渲染到根 DOM 节点中，请调用 element.patch(velement) method：

const velement = <div id="root"><h1>Hello, world</h1></div>;
document.$("div#root").patch(velement);

上面的内容将在该 <h1> 元素中显示“你好，世界”文本。

Updating the Rendered Element

要更新已经渲染的元素，我们只需使用更改的 velement 再次调用 element.patch(velement) 它即可。 element.patch() 本机函数将通过新的 velement 定义修补现有 DOM 元素。

请看这个滴答作响的时钟示例：

function tick() {
 const velement = <div id="root">
 <h1>Hello, world!</h1>
 <h2>It is {new Date().toLocaleTimeString()}.</h2>
 </div>;
 document.$("div#root").patch(velement);
 return true; // to keep timer running
}

setInterval(tick,1000);

上面的代码将每秒调用 tick() 一次函数。刻度将更新 <div> 元素。

Element.patch() only updates what is necessary

该 element.patch(vdom) 函数将元素及其子元素与前一个元素进行比较，并且仅应用使 DOM 达到所需状态所需的 DOM 更新。

即使我们在每次刻度时创建一个描述整个 UI 树的元素，也只有内容已更改的文本节点才会由 element.patch() 更新。

Therefore Reactor (