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í)行一次。
