ESX
JSX ではトランスパイルによって DOM Tree を表すオブジェクトを作り、変更される度に React がその差分を検知してレンダリングするようになっている(いわゆる Virtual DOM)。 code: (jsx)
function HelloMessage({ name }) {
return <div>Hello {name}</div>;
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById("container")
);
Polymer の lit-html では ES6 の Template Literal を使うことで、変更される部分と変更されない部分とに分けることで最適化してレンダリングしている。 code: (js)
import { html, render } from 'lit-html';
// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html<div>Hello ${name}!</div>;
// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);
今回新たに現れた ESX は lit-html のように Template Literal で変更されない部分をキャッシュし、SSR を高速化する。クライアント向けのレンダリングについては JSX と同じように React Element を返す。 code: (jsx)
import createEsx from "esx";
const esx = createEsx();
function HelloMessage({ name }) {
return esx<div>Hello ${name}</div>;
}
esx.register({ HelloMessage });
// JSX の場合と同じように React Element を生成する
ReactDOM.hydrate(
esx<HelloMessage name="Taylor" />,
document.getElementById("container")
);
// SSR ではこうする(キャッシュにより高速化されている)
esx.renderToString(esx<HelloMessage name="Taylor" />);