SolidJS - study-react

SolidJS

https://gyazo.com/1fa0e682720d46b7efc1248615809c19

VirtualDOMを持たないViewライブラリ

要素レベルで細かく再描画を行うため、他のViewライブラリと比べて高速

React Hooksのようで、全く違うAPIを持っている

code:js

import { createSignal, onCleanup } from "solid-js";

import { render } from "solid-js/web";

const App = () => {

const count, setCount = createSignal(0),

timer = setInterval(() => setCount(count() + 1), 1000);

onCleanup(() => clearInterval(timer));

return <div>{count()}</div>;

};

render(() => <App />, document.getElementById("app"));

createSignalというのがReactでいうuseStateみたいな使われ方をしている

しかし、原理が全く違う

ReactがuseState()でSubscribeするのに対して、

Solidはcount()でSubscribeしている

ゆえに、APIも違う

ReactのuseStateは値とsetterを返すのに対して、

SolidのcreateSignalはgetterとsetterを返している

このgetterがsubscribeを兼ねているのである

setCount(count() + 1)がコールされたとき、Solidは<div></div>の中にある{count()}の部分だけを更新する

そこにしか影響ないという紳士協定に基づいていると言える

if文など、制御フローの中でcount()をコールするのはアンチパターンなのであろう