2分钟掌握Solidjs

Solidjs 是一个与 React.js 非常相似的前端框架，用于构建 UI 界面。它也使用普通的 JavaScript 函数和 JSX 来定义组件：

function Counter() {
  return (
    <div>
      <p>计数：{count()}</p>
      <button>+1</button>
    </div>
  );
}

不同的是，Solidjs 提供了更细粒度的状态管理方式：

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

并且 Solidjs 没有使用 virtual dom，所有的状态更新都是在真实 DOM 上操作的，这样让 Solidjs 的性能得到了很大的提升。

Solidjs 组件函数只是用来包装代码，并且只执行一次，因此它的副作用都可以直接编写在函数体中，hooks 也可以写在条件语句中：

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

  setInterval(() => console.log(new Date()), 1000);
  // ...
}

如果需要根据状态的变化而重新执行，可以使用 createEffect hook：

createEffect(() => {
  console.log("计数为：", count());
});

要记录计算结果从而避免重复计算，可以使用 memo hook：

function fibonacci(num) {
  if (num <= 1) return 1;

  return fibonacci(num - 1) + fibonacci(num - 2);
}

function Counter() {
  const [count, setCount] = createSignal(10);
  const fib = createMemo(() => fibonacci(count()));
  // ...
}

另外 solidjs 也支持 onMount 和 onCleanup 生命周期：

function App() {
  const [photos, setPhotos] = createSignal([]);
  onMount(async () => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
    setPhotos(await res.json());
  });
}

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

  const timer = setInterval(() => setCount(count() + 1), 1000);
   onCleanup(() => clearInterval(timer));

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

使用方法

要创建一个 solidjs 项目，可以运行 npx degit solidjs/templates/js counter，它会使用 vite 来作为脚手架进行创建：

npx degit solidjs/templates/js counter

组件目录结构也和 React 类似：

├── README.md
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── App.jsx
│   ├── App.module.css
│   ├── assets
│   │   └── favicon.ico
│   ├── index.css
│   ├── index.jsx
│   └── logo.svg
└── vite.config.js

这里我们用一个 Counter 计数器示例，来展示一下 Solidjs 的使用方法。

首先是 UI 部分，这里展示计数器和按钮，然后使用 createSignal 定义状态，之后在 UI 部分使用状态，注意，这里 createSignal 返回的状态是一个函数，需要使用调用的形式：

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <p>计数：{count()}</p>
      <button>+1</button>
    </div>
  );
}

然后我们给按钮添加一个事件监听，onClick：

<button onClick={handleIncrease}>+1</button>

在事件监听函数中修改状态，就能更改计数器的数字了：

function handleIncrease() {
    setCount(count() + 1);
  }

对于 JSX 部分，有跟 React 不一样的地方，Solidjs 提供了 For 组件来展示列表数据：

<For each={new Array(count())} fallback={<div>无数据</div>}>
  {(item, index) => <p>{index}</p>}
</For>

提供了 Show 组件来根据条件展示相应的视图：

<Show when={count() > 5}>计数超过了 5</Show>

小结

好了，这个就是 Solid.js 的介绍，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！