Virtual DOM
Bind Once
Bind once is a similar technique to shallow updates with a more fine-grained control.
createVElement("div").children([
Header.createVNode({"title": "MyCompany"}).bindOnce(),
Content.createVNode(content),
Footer.createVNode({"key": "value"}).bindOnce(),
]);
Static Nodes
When some part of component is just a large static block, it is possible to prevent reconciliation algorithm from diffing it by reusing the same virtual node on each render. For example:
const MyComponent = new ComponentDescriptor<void, {node: VNode}>()
.init((c) => {
c.state = {node: createVElement("div").child("pretend that there is some heavy content...")};
})
.update((c, props, state) => {
c.sync(c.createVRoot()
.children([
createVElement("section").className("header"),
state.node,
createVElement("section").className("footer"),
]));
});
Keep Alive
Keep alive prevents reconciliation algorithm from disposing components, so when they are removed from the document, instead of disposing them, they are detached.
const MyComponent = new ComponentDescriptor<{showChild: boolean}, {aliveComponent: Component}>()
.init((c) => {
c.state = {aliveComponent: ChildComponent.createComponent()};
})
.disposed((c) => {
c.state.aliveComponent.dispose();
})
.update((c, props, state) => {
c.sync(c.createVRoot().child(
props.showChild ? ChildComponent.createVNode().keepAlive(state.aliveComponent) : null));
});