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，监听属性的变化。
createEffect(() => {
console.log("The count is now", count());
});
每次count发生变化，都会执行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发生变化的时候count() * 2 都会重新计算。
那么在Solid里，我就可以将count() * 2抽出来：
const doubleCount = () => count() * 2;
而在合适的地方直接调用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会执行15次，但实际count()的值并没有发生任何变化，我们相当于白执行了14次。
那么我们可以这么写这个doubleCount:
const doubleCount = createMemo();
那么这个时候上面那段代码() => count() * 2其实就只会执行一次。
