Signal

如同React的useState，會返回一個[getter, setter]。

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

const [count, setCount] = createSignal(0);

function Counter() {
  return <div>Count: {count()}</div>;
}

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

不同的在于React中的getter是可以直接訪問count，而vue3是count.value，視圖層也可以直接使用count。

Effect

這就類似于vue2的watch，監(jiān)聽屬性的變化。

createEffect(() => {
  console.log("The count is now", count());
});

每次count發(fā)生變化，都會執(zhí)行createEffect。

衍生Signal

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

function Counter() {
  const [count, setCount] = createSignal(0);

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

  return <div>Count: {count() * 2}</div>;
}

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

可以相信每次count發(fā)生變化的時候count() * 2 都會重新計算。
那么在Solid里，我就可以將count() * 2抽出來：

const doubleCount = () => count() * 2;

而在合適的地方直接調(diào)用doubleCount即可：

return <div>Count: {doubleCount()}</div>;

Memo

比如我在頁面里用了15個doubleCount：

return <div>{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}-{doubleCount()}</div>;

那么實際上 count() * 2會執(zhí)行15次，但實際count()的值并沒有發(fā)生任何變化，我們相當于白執(zhí)行了14次。
那么我們可以這么寫這個doubleCount:

const doubleCount = createMemo();

那么這個時候上面那段代碼() => count() * 2其實就只會執(zhí)行一次。