搭建 SolidJS 基础开发环境

自从 React 推出 Hooks 函数式组件后，我就被其简洁灵活的使用方式所吸引，并开始从 Vue 转向 React。刚开始一切都很美好。随着业务功能的深入，React Hooks 一些顾此失彼的问题开始让我用得越来越不踏实。在继续将就着用还是换回 Vue 这两个选择之间，我想尝试一下有没有其它更满意的选择，所以我开始试水 SolidJS。

SolidJS 和 React 的对比

SolidJS 的用法初看和 React 函数式组件很像。比如下面这个计数器的代码：

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

const CountingComponent = () => {
    const [count, setCount] = createSignal(0);
    const interval = setInterval(() => setCount(c => c + 1), 1000);

    onCleanup(() => clearInterval(interval));

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

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

一样的 Hooks 写法，同样使用了 JSX。虽然不能说一模一样，至少也是八九不离十了。

不过仔细审视一下还是能发现很多区别。比如：

React 的 Hooks 函数通常都是以 use 开始，SolidJS 中是 create
除了 create，还有 onCleanup 这种以 on 开头的函数，这比 React 中全部用 use 更加细化。
count 在使用时用的是调用函数的写法，这说明它不是一个可以直接取值的变量。
setInterval 的用法表明了组件不会因为 count 返回值的变化而全局刷新。这代码要放在 React 中就妥妥的是个坑。

就这一段示例代码，两者相比，我更喜欢 SolidJS。用法和 React 差不多，又没有 React 那么多坑，性能上还比 React 出色，没理由不学习一下。

使用模板命令安装 SolidJS

先从搭建基础开发环境开始，官方推荐的命令如下：

npx degit solidjs/templates/js my-app

这样就能初始化好一个以 my-app 命名的项目基础结构。上面是 JavaScript 版本的，如果想要 TypeScript 版本的，命令如下：

npx degit solidjs/templates/ts my-app

然后只需要进入新创建的目录，然后运行以下 npm 命令：

npm install
npm run dev

就可以打开浏览器访问 http://localhost:3000 看效果了。

执行以上命令的前提是要能正常访问 Github，否则可能会失败。另外上面的模版命令会生成一些不需要的文件，如果你跟我一样有点洁癖，可以参考接下来的手动版搭建过程。

手动安装 SolidJS

首先创建一个项目目录：

mkdir solid-demo

然后进入目录中，使用 npm 安装 SolidJS 和 Vite 打包工具：

cd solid-demo
npm install solid-js vite vite-plugin-solid -D

命令执行完成后，会在当前目录中生成一个 package.json 文件，在这个文件中加入以下打包命令：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

挨着开头的 { 符号下放就行了。

接下来准备 Vite 的打包配置文件。创建一个新文件，文件名为 vite.config.js，代码如下：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

然后再创建一个文件名为 index.html 的文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Solid Demo</title>
</head>
<body>
    <div id="app"></div>
    <script src="main.jsx" type="module"></script>
</body>
</html>

这是 Vite 打包的入口定位文件，script 中的 type="module" 很关键。

最后再创建一个名为 main.jsx 的脚本文件，代码如下：

import { render } from 'solid-js/web';

function App() {
  return (
      <div>
          <h1>Hello, SolidJS</h1>
      </div>
  );
}

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

然后输入 npm run dev 命令，打开浏览器输入 http://localhost:3000，一切步骤无误的话，应该能看到以下内容。

搭建 SolidJS 基础开发环境

SolidJS 和 React 的对比

使用模板命令安装 SolidJS

手动安装 SolidJS

上一篇

下一篇