学习《SolidJS》（一）简介与环境配置

一个用于构建用户界面，简单高效、性能卓越的JavaScript库 ------------来自SolidJS官网官网地址solidjs.com

我为什么选择SolidJS

我选择学习SolidJS不是性能卓越，不是简单高效。而是它使用jsx语法，函数组件仅执行一次，不会有React的hook相关问题。而且的响应式数据不是必须写在函数组件里面，与Vue3类似，这对我来说是非常方便的定义全局响应式数据。

我为什么写文章

其实我最近有发教程类的视频（与前端无关），在录制和制作视频过程中我会更加深入的学习，甚至学习达芬奇（稍微学了一点点）。所以写文章主要有两个目的，一个是想要更加深入地学习SolidJS，另外一个是提高一下写作能力。为什么不做成视频？那当然是做视频太累了！现在的我剪一段视频都要花好几个钟，单纯做字幕都花不少时间。虽然我有用AI自动生成字幕，但是我还是要过一遍，将识别错误的改掉。

开始

创建项目（会的请直接跳过）

我目前是比较喜欢使用Vite，所以就直接使用Vite创建SolidJS项目。另外就是包管理我用pnpm，各位用自己喜欢的就行。执行下面这个命令创建项目

shell 复制代码

pnpm create vite

如下图进行选择，typescript不是必选，按个人喜好就好，项目名也是

然后执行如下命令

shell 复制代码

cd learn_solid
pnpm install
pnpm run dev

如下图

运行成功后，在浏览器打开对应的网站就得到下图的效果

目录结构

从下图可以看到，其实和(Vite创建的)React是一样的，不同的是src/main.tsx改为了src/index.tsx。代码肯定是写在src里面，其它的暂时不动就行了。

index.tsx

index.tsx现在也都差不多，创建挂载点，并且传入要挂载的组件。与React不一样的是SolidJS的render函数接收的是函数

tsx 复制代码

/* @refresh reload */
import { render } from "solid-js/web";

import "./index.css";
import App from "./App";

const root = document.getElementById("root");

render(() => <App />, root!);

App.tsx

从这个组件定义来看，可以说和React基本一致了，也就是createSignal这个函数名不一样。当然！它编译后与React比是天差地别的。

tsx 复制代码

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

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt="Vite logo" />
        </a>
        <a href="https://solidjs.com" target="_blank">
          <img src={solidLogo} class="logo solid" alt="Solid logo" />
        </a>
      </div>
      <h1>Vite + Solid</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count()}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p class="read-the-docs">
        Click on the Vite and Solid logos to learn more
      </p>
    </>
  )
}

最后

虽然现在我一直拿它和React比，但是其实不要用React作为比较。其实在我的感觉里，可能把它与Vue对比可能会更合适一下。比如把return中的jsx代码当作Vue的teamplate，把函数中的代码当作Vue3的setup更加合适一些。