当前位置：首页 > article >正文

探索前端的未来：深度使用 SolidJS 构建高性能用户界面

article 2025/1/27 11:56:27

SolidJS 是近年来前端开发领域的一颗新星，它结合了 React 的思维模式和 Vue 的性能优势，提供了一种高效且轻量的框架解决方案。本文将带你深入了解 SolidJS 的实际使用，并探索如何利用其核心特性构建现代化的高性能应用。

为什么选择 SolidJS？

相比于其他框架，SolidJS 有以下独特优势：

超高性能：基于 fine-grained reactivity（细粒度反应性）机制，仅更新必要的 DOM 节点。
零虚拟 DOM：与 React 不同，SolidJS 完全避免了虚拟 DOM 的开销，直接操作真实 DOM。
轻量化：核心包大小仅 ~3KB，适合需要极致性能的项目。
全面 TypeScript 支持：现代化的类型安全开发体验。
简单直观：学习曲线低，与 React 十分相似。

接下来，通过一个完整示例和高级用法展示，你将体验 SolidJS 的强大功能。

快速开始

1. 安装和初始化项目

使用以下命令创建一个 SolidJS 项目：

npx degit solidjs/templates/ts my-solid-app
cd my-solid-app
npm install
npm start

核心概念与基础用法

1. 声明式组件与状态管理

在 SolidJS 中，状态可以通过 createSignal 创建并直接绑定到 UI 中。

import { createSignal } from 'solid-js';

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

  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={() => setCount(count() + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

createSignal：创建可变状态，类似于 React 的 useState。
细粒度更新：仅修改状态所影响的部分 DOM。

高级特性与用法

1. 高性能循环渲染

SolidJS 使用 For 提供高性能的列表渲染方式。通过内部优化，它避免了传统 map 方法中无效的 DOM 操作。

import { For } from 'solid-js';

function ItemList() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      <For each={items}>{(item) => <li>{item}</li>}</For>
    </ul>
  );
}

For：专为循环渲染优化的指令，性能优于数组方法。

2. 动态样式与类名

通过 createSignal 配合动态绑定，SolidJS 提供优雅的方式操作样式：

import { createSignal } from 'solid-js';

function StyledBox() {
  const [isActive, setActive] = createSignal(false);

  return (
    <div
      class={isActive() ? 'active' : ''}
      style={
  
  { color: isActive() ? 'green' : 'red' }}
      onClick={() => setActive(!isActive())}
    >
      Click to toggle style
    </div>
  );
}

3. 支持的生命周期

SolidJS 提供丰富的生命周期函数，与 React 类似但更高效。

import { onMount, onCleanup } from 'solid-js';

function Timer() {
  let timer;
  onMount(() => {
    timer = setInterval(() => console.log("Tick"), 1000);
  });
  onCleanup(() => clearInterval(timer));

  return <p>Check console for ticking...</p>;
}

onMount：组件挂载时触发。
onCleanup：组件卸载时触发，适用于资源清理。

实战项目示例：实时搜索框

接下来，我们用 SolidJS 实现一个支持实时搜索的 UI。

import { createSignal } from 'solid-js';

function SearchBox() {
  const [query, setQuery] = createSignal('');
  const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

  const filteredItems = () =>
    items.filter((item) => item.toLowerCase().includes(query().toLowerCase()));

  return (
    <div>
      <input
        type="text"
        value={query()}
        onInput={(e) => setQuery(e.currentTarget.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems().map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchBox;

高级代码示例

1. 自定义 Hook

import { createSignal } from 'solid-js';

function useCounter(initialValue = 0) {
  const [count, setCount] = createSignal(initialValue);
  return { count, increment: () => setCount(count() + 1), decrement: () => setCount(count() - 1) };
}

function App() {
  const { count, increment, decrement } = useCounter(10);

  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
    </div>
  );
}

export default App;

2. 异步数据加载

import { createResource } from 'solid-js';

const fetchData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
};

function DataFetcher() {
  const [data] = createResource(fetchData);

  return (
    <div>
      <h1>Posts</h1>
      {data.loading && <p>Loading...</p>}
      {data() && (
        <ul>
          {data().map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DataFetcher;

3. 动态路由

import { Router, Routes, Route } from 'solid-app-router';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </Router>
  );
}

export default App;

4. 模态框组件

import { createSignal } from 'solid-js';

function Modal({ isOpen, onClose }) {
  return (
    isOpen() && (
      <div class="modal">
        <div class="modal-content">
          <span class="close" onClick={onClose}>&times;</span>
          <p>This is a modal!</p>
        </div>
      </div>
    )
  );
}

function App() {
  const [isOpen, setIsOpen] = createSignal(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </div>
  );
}

export default App;

5. 表单处理

import { createSignal } from 'solid-js';

function Form() {
  const [formData, setFormData] = createSignal({ name: '', email: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData());
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData().name}
        onInput={(e) => setFormData({ ...formData(), name: e.currentTarget.value })}
        placeholder="Name"
      />
      <input
        type="email"
        value={formData().email}
        onInput={(e) => setFormData({ ...formData(), email: e.currentTarget.value })}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;