Note: this document is written intentionally close to ReactJS/Rendering-Elements article to highlight differences and similarities with ReactJS.

Rendering Elements

Reactor's virtual DOM element is a definition of real DOM element. At some point real DOM element will be created using virtual one as a prototype.

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

Unlike physical DOM elements, Reactor elements are plain script tuples, and are cheap to create. Dedicated Sciter's DOM methods take care of updating the DOM to match such virtual elements.

Rendering an Element into the DOM

Let’s say there is a <div> somewhere in your HTML file:

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

Let's call this a "root" DOM node - everything inside it will be managed by Reactor.

Applications that use Reactor may have as a single root DOM node as many isolated root DOM nodes - whatever is required. And you can mix Reactor managed elements with elements managed by other means, e.g. scripting behavioral classes.

To render a Reactor element into a root DOM node, call element.merge(velement) method:

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

That above will display "Hello, world" text inside that <h1> element.

Updating the Rendered Element

To update already rendered element we simply call element.merge(velement) again on it with changed velement. The Element.merge() native function will patch that existing DOM element by new velement definition.

Consider this ticking clock example:

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

self.timer(1s, tick);

Code above will call tick() function every second. And the tick will update the <div> element.

Check sample at {sdk}/samples/+reactor/doc-samples/rendering/clock.htm in sciter.exe.

Element.merge() only updates what is necessary

The Element.merge() function compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by Element.merge().

Therefore Reactor (merge() method in particular) allows to define single rule of how the UI should look at any given moment rather than how to change it over time.