SolidJS
Solid 是一种用于构建用户界面的声明式的、高效的 JavaScript 库。它的设计目标是提供类似于 React 的组件化开发体验，同时在性能和响应性方面进行优化。Solid 采用了响应性原语来实现高效更新，不使用虚拟 DOM，而是在编译时确定组件的更新逻辑，从而在运行时提供更快的渲染性能。
查看更多相关内容
SolidJS Router 如何使用？有哪些高级特性？SolidJS Router 提供了强大的客户端路由功能：
**基本使用**：
```javascript
import { Router, Route, Routes } from '@solidjs/router';
function App() {
return (
<Router>
<Routes>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/users/:id" component={User} />
</Routes>
</Router>
);
}
```
**路由参数**：
```javascript
function User() {
const params = useParams();
const userId = () => params.id; // 响应式访问
return <div>User ID: {userId()}</div>;
}
```
**导航**：
```javascript
import { useNavigate, Link, A } from '@solidjs/router';
function Navigation() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 编程式导航
};
return (
<nav>
<Link href="/">Home</Link> {/* 使用 Link 组件 */}
<A href="/about">About</A> {/* 使用 A 组件（更轻量） */}
<button onClick={handleClick}>Go to About</button>
</nav>
);
}
```
**嵌套路由**：
```javascript
function App() {
return (
<Router>
<Routes>
<Route path="/" component={Layout}>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Route>
</Routes>
</Router>
);
}
function Layout(props) {
return (
<div>
<Header />
{props.children}
<Footer />
</div>
);
}
```
**路由守卫**：
```javascript
function ProtectedRoute(props) {
const isAuthenticated = createMemo(() => checkAuth());
return (
<Show when={isAuthenticated()}>
{props.children}
</Show>
);
}
```
**数据预加载**：
```javascript
const [data] = createResource(fetchData);
function DataRoute() {
return (
<Show when={!data.loading} fallback={<Loading />}>
<div>{data().content}</div>
</Show>
);
}
```
服务端 · 2月21日 15:24
SolidJS 为什么不使用虚拟 DOM？它是如何实现高性能的？SolidJS 不使用虚拟 DOM，采用直接 DOM 操作和细粒度更新机制：
**工作原理**：
1. **编译时优化**：将 JSX 编译为高效的 DOM 创建和更新代码
2. **细粒度追踪**：每个 signal 都知道依赖它的 DOM 节点
3. **直接更新**：状态变化时直接更新对应的 DOM 节点
**示例对比**：
```javascript
// React - 虚拟 DOM diff
function Counter() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}
// 每次更新都会重新渲染整个组件
// SolidJS - 细粒度更新
function Counter() {
const [count, setCount] = createSignal(0);
return <div>{count()}</div>;
}
// 只更新 {count()} 对应的文本节点
```
**性能优势**：
- 无需虚拟 DOM diff 算法
- 避免不必要的 DOM 操作
- 更小的内存占用
- 更快的更新速度
**实现机制**：
- 使用 `createSignal` 创建响应式状态
- 编译器将 JSX 转换为 `insert`、`createComponent` 等运行时函数
- 每个表达式都被包装在响应式上下文中
- 自动建立 signal 与 DOM 节点的依赖关系
**适用场景**：
- 大型列表渲染
- 高频更新的应用
- 需要极致性能的场景
服务端 · 2月21日 15:24
SolidJS 和 React 有什么区别？如何选择适合的框架？SolidJS 和 React 都是现代前端框架，但设计理念和技术实现有显著差异：
**核心架构对比**：
| 特性 | React | SolidJS |
|------|-------|---------|
| 渲染方式 | 虚拟 DOM + 重新渲染 | 细粒度响应式 + 直接 DOM 更新 |
| 组件执行 | 每次状态变化重新执行 | 只执行一次 |
| 状态管理 | useState, useReducer | createSignal, createStore |
| 副作用处理 | useEffect（需声明依赖） | createEffect（自动追踪） |
| 派生状态 | useMemo（需声明依赖） | createMemo（自动追踪） |
| 列表渲染 | map + key | For, Index 组件 |
| 条件渲染 | 三元运算符, &&, \|\| | Show, Switch 组件 |
**代码对比示例**：
```javascript
// React
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
const doubled = useMemo(() => count * 2, [count]);
return (
<div>
<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button onClick={() => setCount(c => c + 1)}>+</button>
</div>
);
}
// SolidJS
function Counter() {
const [count, setCount] = createSignal(0);
createEffect(() => {
document.title = `Count: ${count()}`;
});
const doubled = createMemo(() => count() * 2);
return (
<div>
<p>Count: {count()}</p>
<p>Doubled: {doubled()}</p>
<button onClick={() => setCount(c => c + 1)}>+</button>
</div>
);
}
```
**性能对比**：
- SolidJS 在大型列表渲染中性能更优
- SolidJS 内存占用更小
- React 生态系统更成熟
- React 学习资源更丰富
**适用场景**：
- **选择 React**：团队熟悉 React、需要丰富生态、大型企业应用
- **选择 SolidJS**：追求极致性能、需要细粒度更新、响应式优先的应用
**迁移建议**：
- React 开发者可以快速上手 SolidJS
- 概念相似但实现方式不同
- 需要改变思维方式（从重新渲染到响应式更新）
服务端 · 2月21日 15:23
SolidJS 有哪些性能优化技巧？如何避免常见的性能陷阱？SolidJS 提供了多种性能优化技巧，可以显著提升应用性能：
**使用 createMemo 缓存计算结果**：
```javascript
// 不好的做法 - 每次渲染都重新计算
function Component() {
const [items, setItems] = createSignal([]);
const total = () => items().reduce((sum, item) => sum + item.price, 0);
return <div>Total: {total()}</div>;
}
// 好的做法 - 使用 createMemo 缓存
function Component() {
const [items, setItems] = createSignal([]);
const total = createMemo(() => items().reduce((sum, item) => sum + item.price, 0));
return <div>Total: {total()}</div>;
}
```
**批量更新**：
```javascript
import { batch } from 'solid-js';
// 不好的做法 - 多次触发更新
function updateMultiple() {
setName('John');
setAge(25);
setEmail('john@example.com');
}
// 好的做法 - 使用 batch 批量更新
function updateMultiple() {
batch(() => {
setName('John');
setAge(25);
setEmail('john@example.com');
});
}
```
**使用 Index 优化列表渲染**：
```javascript
// For - 使用对象作为 key（适合动态列表）
<For each={items()} fallback={<div>No items</div>}>
{(item) => <div>{item.name}</div>}
</For>
// Index - 使用索引作为 key（性能更好，适合静态列表）
<Index each={items()}>
{(item, index) => <div>{item().name}</div>}
</Index>
```
**懒加载组件**：
```javascript
import { lazy } from 'solid-js';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>
);
}
```
**避免不必要的响应式**：
```javascript
// 不好的做法 - 创建不必要的 signal
function Component() {
const [count, setCount] = createSignal(0);
const doubled = createSignal(() => count() * 2); // 不需要 signal
return <div>{doubled()}</div>;
}
// 好的做法 - 使用普通函数
function Component() {
const [count, setCount] = createSignal(0);
const doubled = () => count() * 2;
return <div>{doubled()}</div>;
}
```
**使用 untrack 避免追踪**：
```javascript
import { untrack } from 'solid-js';
createEffect(() => {
const value = untrack(() => someSignal());
console.log(value); // 不会建立依赖关系
});
```
**性能监控**：
```javascript
import { devtools } from 'solid-js/dev';
devtools; // 启用开发工具
```
服务端 · 2月21日 15:23
SolidJS 中的控制流组件有哪些？如何使用 Show、For、Switch 等？SolidJS 提供了多种控制流组件，用于条件渲染和列表渲染：
**条件渲染**：
```javascript
// Show - 条件渲染（类似 React 的条件渲染）
<Show when={isLoggedIn()} fallback={<Login />}>
<Dashboard />
</Show>
// Switch - 多条件分支
<Switch fallback={<NotFound />}>
<Match when={status() === 'loading'}>
<Loading />
</Match>
<Match when={status() === 'success'}>
<Success />
</Match>
<Match when={status() === 'error'}>
<Error />
</Match>
</Switch>
```
**列表渲染**：
```javascript
// For - 列表渲染（推荐使用）
<For each={items()}>
{(item, index) => (
<div>
{index()}: {item.name}
</div>
)}
</For>
// Index - 使用索引作为 key（性能更好）
<Index each={items()}>
{(item, index) => (
<div>
{index}: {item().name}
</div>
)}
</Index>
```
**动态组件**：
```javascript
// Dynamic - 动态组件渲染
<Dynamic component={currentComponent()} props={props} />
// Portal - 传送门到其他 DOM 节点
<Portal mount={document.getElementById('modal-root')}>
<Modal />
</Portal>
```
**Suspense - 异步加载**：
```javascript
<Suspense fallback={<Loading />}>
<AsyncComponent />
</Suspense>
// 嵌套 Suspense
<Suspense fallback={<Skeleton />}>
<Suspense fallback={<LoadingAvatar />}>
<UserAvatar />
</Suspense>
<Suspense fallback={<LoadingPosts />}>
<UserPosts />
</Suspense>
</Suspense>
```
**ErrorBoundary - 错误边界**：
```javascript
<ErrorBoundary fallback={(err) => <ErrorPage error={err} />}>
<Component />
</ErrorBoundary>
```
**最佳实践**：
- 使用 `For` 而不是 `map` 进行列表渲染
- 使用 `Index` 当列表项顺序不变时
- 使用 `Show` 进行简单条件判断
- 使用 `Switch` 处理多条件分支
- 使用 `Suspense` 处理异步组件
服务端 · 2月21日 15:23
SolidJS 如何与 TypeScript 配合使用？有哪些类型定义最佳实践？SolidJS 提供了完善的 TypeScript 支持和类型系统：
**基本类型定义**：
```typescript
import { createSignal, createEffect } from 'solid-js';
// 定义 signal 类型
const [count, setCount] = createSignal<number>(0);
const [user, setUser] = createSignal<User | null>(null);
// 定义 effect
createEffect(() => {
const value = count(); // value 自动推断为 number
console.log(value);
});
```
**组件类型定义**：
```typescript
// 函数组件
interface Props {
title: string;
count: number;
onIncrement?: () => void;
}
function Counter(props: Props) {
return (
<div>
<h1>{props.title}</h1>
<p>Count: {props.count}</p>
<button onClick={props.onIncrement}>+</button>
</div>
);
}
// 使用 JSX.IntrinsicElements 扩展原生元素类型
declare module 'solid-js' {
namespace JSX {
interface IntrinsicElements {
'my-custom-element': {
value: string;
onChange: (value: string) => void;
};
}
}
}
```
**Store 类型定义**：
```typescript
import { createStore } from 'solid-js/store';
interface AppState {
user: {
name: string;
age: number;
email: string;
};
items: Array<{
id: number;
name: string;
}>;
}
const [state, setState] = createStore<AppState>({
user: { name: '', age: 0, email: '' },
items: []
});
// 类型安全的更新
setState('user', 'name', 'John'); // ✅ 正确
setState('user', 'invalid', 'value'); // ❌ 类型错误
```
**Resource 类型定义**：
```typescript
import { createResource } from 'solid-js';
interface User {
id: number;
name: string;
email: string;
}
const [user] = createResource<User>(fetchUser);
const userValue = user(); // User | undefined
// 使用泛型定义返回类型
const [data] = createResource<User[], Error>(fetchUsers, {
initialValue: []
});
```
**Context 类型定义**：
```typescript
import { createContext, useContext } from 'solid-js';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>();
function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within ThemeProvider');
}
return context;
}
```
**类型工具**：
```typescript
// 使用 utility types
type PartialState = Partial<AppState>;
type RequiredState = Required<AppState>;
type ReadonlyState = Readonly<AppState>;
// 条件类型
type SignalType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;
```
**最佳实践**：
- 为所有组件定义 Props 接口
- 使用泛型定义 signal 和 store 类型
- 为 context 定义明确的类型
- 使用 utility types 简化类型定义
- 启用严格模式检查
服务端 · 2月21日 15:23
SolidJS 如何进行单元测试和集成测试？有哪些测试工具推荐？SolidJS 提供了强大的测试工具和方法来测试组件和响应式逻辑：
**测试工具**：
```javascript
import { render, screen, fireEvent, waitFor } from '@solidjs/testing-library';
import { describe, it, expect } from 'vitest';
describe('Counter Component', () => {
it('renders initial count', () => {
render(() => <Counter />);
expect(screen.getByText('Count: 0')).toBeInTheDocument();
});
it('increments count when button clicked', async () => {
render(() => <Counter />);
const button = screen.getByText('+');
fireEvent.click(button);
await waitFor(() => {
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
});
});
```
**测试响应式逻辑**：
```javascript
import { createSignal, createEffect } from 'solid-js';
import { createRoot } from 'solid-js';
describe('Reactive Logic', () => {
it('tracks signal changes', () => {
createRoot((dispose) => {
const [count, setCount] = createSignal(0);
let effectCallCount = 0;
createEffect(() => {
effectCallCount++;
count();
});
expect(effectCallCount).toBe(1);
setCount(1);
expect(effectCallCount).toBe(2);
dispose();
});
});
});
```
**测试异步操作**：
```javascript
import { createResource } from 'solid-js';
describe('Async Operations', () => {
it('handles loading state', async () => {
const fetchMock = vi.fn(() =>
new Promise(resolve => setTimeout(() => resolve({ data: 'test' }), 100))
);
const [data] = createResource(fetchMock);
expect(data.loading).toBe(true);
await waitFor(() => expect(data.loading).toBe(false));
expect(data()).toEqual({ data: 'test' });
});
});
```
**测试用户交互**：
```javascript
describe('User Interactions', () => {
it('handles form submission', () => {
render(() => <LoginForm />);
const input = screen.getByLabelText('Email');
const button = screen.getByText('Submit');
fireEvent.input(input, { target: { value: 'test@example.com' } });
fireEvent.click(button);
expect(screen.getByText('Submitted: test@example.com')).toBeInTheDocument();
});
});
```
**测试路由**：
```javascript
import { Router } from '@solidjs/router';
describe('Routing', () => {
it('renders correct component for route', () => {
render(() => (
<Router>
<Routes>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Routes>
</Router>
));
expect(screen.getByText('Home Page')).toBeInTheDocument();
});
});
```
**最佳实践**：
- 使用 `@solidjs/testing-library` 进行组件测试
- 使用 `createRoot` 包装测试以自动清理
- 测试用户行为而非实现细节
- 使用 `waitFor` 处理异步操作
- Mock 外部依赖和 API 调用
- 保持测试独立和可重复
服务端 · 2月21日 15:23
SolidJS 中如何管理复杂状态？有哪些状态管理方案？SolidJS 提供多种状态管理方案，适用于不同复杂度的场景：
**基础状态管理**：
```javascript
// createSignal - 最基础的状态
const [count, setCount] = createSignal(0);
// createStore - 嵌套对象状态
const [state, setState] = createStore({
user: { name: 'John', age: 25 },
items: []
});
// 细粒度更新嵌套对象
setState('user', 'name', 'Jane');
```
**派生状态**：
```javascript
// createMemo - 缓存计算结果
const doubled = createMemo(() => count() * 2);
// createComputed - 立即执行的派生状态
const total = createComputed(() => items().reduce((sum, item) => sum + item.price, 0));
```
**异步状态**：
```javascript
// createResource - 异步数据管理
const [data, { mutate, refetch }] = createResource(fetchData, {
initialValue: null,
storage: (value) => localStorage.setItem('data', JSON.stringify(value))
});
```
**跨组件状态**：
```javascript
// 使用 Context API
const CounterContext = createContext();
function App() {
const [count, setCount] = createSignal(0);
return (
<CounterContext.Provider value={[count, setCount]}>
<Child />
</CounterContext.Provider>
);
}
// 使用 useStore 进行全局状态管理
import { useStore } from '@solidjs/store';
```
**最佳实践**：
- 简单状态使用 `createSignal`
- 复杂对象使用 `createStore`
- 计算属性使用 `createMemo`
- 异步数据使用 `createResource`
- 全局状态使用 Context 或第三方库
服务端 · 2月21日 15:23
SolidJS 组件生命周期有哪些钩子？与 React 有什么区别？SolidJS 组件生命周期与 React 有显著差异：
**核心特点**：
- 组件函数只执行一次，不会因为 props 变化重新执行
- 使用 `onMount` 处理组件挂载
- 使用 `onCleanup` 处理清理逻辑
- 使用 `createEffect` 处理响应式更新
**生命周期钩子**：
```javascript
function MyComponent(props) {
// 组件初始化（只执行一次）
const [count, setCount] = createSignal(0);
// 挂载后执行
onMount(() => {
console.log('Component mounted');
});
// 响应式副作用
createEffect(() => {
console.log('Count changed:', count());
});
// 清理逻辑
onCleanup(() => {
console.log('Cleanup');
});
return <div>{count()}</div>;
}
```
**与 React 对比**：
| 特性 | React | SolidJS |
|------|-------|---------|
| 组件执行 | 每次渲染都执行 | 只执行一次 |
| 状态更新 | 触发重新渲染 | 细粒度 DOM 更新 |
| useEffect | 需要声明依赖数组 | 自动追踪依赖 |
| 组件卸载 | useEffect cleanup | onCleanup |
**最佳实践**：
- 将响应式逻辑放在 `createEffect` 中
- 使用 `onMount` 处理一次性初始化
- 使用 `onCleanup` 清理副作用
- 避免在组件函数中直接调用 signal getter
服务端 · 2月21日 15:22
SolidJS 如何实现服务端渲染（SSR）？有哪些渲染模式？SolidJS 支持服务端渲染（SSR），提供多种渲染模式：
**基本 SSR 设置**：
```javascript
// entry-server.jsx
import { renderToString } from 'solid-js/web';
import App from './App';
export function render(url) {
return renderToString(() => <App url={url} />);
}
// entry-client.jsx
import { hydrate } from 'solid-js/web';
import App from './App';
hydrate(() => <App />, document);
```
**渲染模式**：
1. **静态生成（SSG）**：
```javascript
import { renderToStringAsync } from 'solid-js/web';
export async function getStaticPaths() {
return ['/about', '/contact'];
}
export default async function Page({ params }) {
return renderToStringAsync(() => <Component />);
}
```
2. **服务端渲染（SSR）**：
```javascript
import { StartServer, createHandler } from '@solidjs/start/server';
export default createHandler(() => (
<StartServer
document={({ assets, children }) => (
<html>
<head>{assets}</head>
<body>{children}</body>
</html>
)}
/>
));
```
3. **流式渲染**：
```javascript
import { renderToStream } from 'solid-js/web';
app.get('*', async (req, res) => {
const stream = renderToStream(() => <App />);
stream.pipe(res);
});
```
**数据获取**：
```javascript
// 使用 createResource 处理异步数据
const [data] = createResource(fetchData, {
initialValue: null,
deferStream: true // 支持流式传输
});
// 服务端数据预取
export async function getData() {
return await fetchData();
}
```
**同构应用**：
```javascript
// 在服务端和客户端都能运行的代码
function Component() {
const isServer = useIsServer();
return (
<div>
{isServer() ? 'Server' : 'Client'}
</div>
);
}
```
**性能优化**：
- 使用 `deferStream` 延迟加载
- 预取关键数据
- 优化 hydration 过程
- 使用 Suspense 边界
服务端 · 2月21日 15:22