Zenn
Open3

SolidJSメモ

SolidJS
midptmidpt

雑感

書いた感じはReact Hooksに近い。
依存配列がいらない！

Signal, Effect, Memo

Zennにありがたい記事があった
https://zenn.dev/fj68/articles/da3458abab5d1c

Signal

時間とともに変化する値が含まれており、Signal の値を変更すると、それを使用しているすべてのものが自動的に更新されます。

変更を監視可能な値をcreateSignal()でサクッと作れる。

// 分割代入でGetterとSetterを作る。createSignal(0)の0は初期値。
const [count, setCount] = createSignal(0);

Effect

Signal は追跡可能な値ですが、それは方程式の半分に過ぎません。それを補完するのが、追跡可能な値によって更新されるオブザーバーです。Effect はそのようなオブザーバーのひとつで、Signal に依存する副作用を実行します。
Effect は solid-js から createEffect をインポートして関数を与えることで作成できます。Effect は、関数の実行中に読み込まれたあらゆる Signal を自動的にサブスクライブし、それらのいずれかが変更されると再実行します。

createEffect()を使って関数を簡単にサブスクライブできる。
countが変更される（この場合はボタンをクリックしてsetCountが実行され、count()の値が更新される）と、createEffect()に書いてあるconsole.log()も動く。

function Counter() {
  const [count, setCount] = createSignal(0);
  createEffect(() => {
    console.log("The count is now", count());
  });

  return <button onClick={() => setCount(count() + 1)}>Click Me</button>;
}

render(() => <Counter />, document.getElementById('app'));

ちなみに、console.log("The count is now", count())をconsole.log("The count is now")のようにシンプルなログ出力にしたり、onClickでsetCountを呼び出さないようにしていたら、当然だけどボタンを押してもログは出力されない。

Memo

重複した作業を減らすために、値をキャッシュすると有益な場合もあります。Memo を使って関数を評価し、その依存関係が変わるまで結果を保存できます。これは、他の依存関係を持つ Effect の計算をキャッシュしたり、DOM ノードの作成などの高価な操作に必要な作業を軽減するのに適しています。

他の値に依存しており、依存している値が変更された時にだけ再計算される値のことをcomputedな値というらしい。性質上キャッシュとしても動き、SolidではMemoと呼ばれるとか。
【SolidJS】作って理解するSignal / Effect / Memo - createMemo

createMemo()でこんな感じに作れる。

const fib = createMemo(() => fibonacci(count()));