学习《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更加合适一些。

相关推荐
dualven_in_csdn1 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy3 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Allen Bright4 小时前
【CSS-9】深入理解CSS字体图标:原理、优势与最佳实践
前端·css
阿芯爱编程5 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试