Solid入门

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其实就只会执行一次。