# Solidjs Basic Guide Solidjs Conditional And List Rendering

> SolidJS 条件渲染和列表渲染

- Skill: `liaosw97/solidjs-basic-guide-solidjs-conditional-and-list-rendering` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/solidjs-basic-guide-solidjs-conditional-and-list-rendering`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/solidjs-basic-guide-solidjs-conditional-and-list-rendering/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/solidjs-basic-guide-solidjs-conditional-and-list-rendering

---


# SolidJS 条件渲染和列表渲染

本规则集定义了在 SolidJS 应用程序中实现条件渲染和列表渲染的最佳实践，旨在确保高效的 UI 更新和可读的代码结构。

## 1. 条件渲染

SolidJS 处理条件渲染的方式与 React 等其他库有所不同，它利用其细粒度响应式系统，只更新实际改变的部分。

### 1.1 使用 `Show` 组件

对于简单的条件渲染，可以使用 SolidJS 内置的 `Show` 组件。它接受一个 `when` 属性（一个信号或计算属性），当 `when` 为真时渲染其 `children`，否则渲染 `fallback`。

```jsx
import { createSignal, Show } from 'solid-js';

function ConditionalDisplay() {
  const [loggedIn, setLoggedIn] = createSignal(false);

  return (
    <div>
      <Show
        when={loggedIn()}
        fallback={<button onClick={() => setLoggedIn(true)}>Login</button>}
      >
        <p>Welcome, User!</p>
        <button onClick={() => setLoggedIn(false)}>Logout</button>
      </Show>
    </div>
  );
}
```

### 1.2 使用 `Switch` 和 `Match` 组件

对于多个条件的复杂场景，可以使用 `Switch` 和 `Match` 组件，类似于其他语言中的 `switch` 语句。

```jsx
import { createSignal, Switch, Match } from 'solid-js';

function MultiConditionalDisplay() {
  const [status, setStatus] = createSignal('loading');

  return (
    <div>
      <Switch fallback={<p>Unknown Status</p>}>
        <Match when={status() === 'loading'}>
          <p>Loading data...</p>
        </Match>
        <Match when={status() === 'success'}>
          <p>Data loaded successfully!</p>
        </Match>
        <Match when={status() === 'error'}>
          <p style={{ color: 'red' }}>Error loading data.</p>
        </Match>
      </Switch>
      <button onClick={() => setStatus('loading')}>Set Loading</button>
      <button onClick={() => setStatus('success')}>Set Success</button>
      <button onClick={() => setStatus('error')}>Set Error</button>
    </div>
  );
}
```

### 1.3 短路逻辑 (不推荐用于复杂场景)

虽然可以使用 `&&` 或 `||` 进行短路逻辑渲染，但对于更复杂的条件，推荐使用 `Show` 或 `Switch/Match`，因为它们能更好地利用 SolidJS 的响应式特性，避免不必要的重新创建 DOM 元素。

```jsx
// 简单场景可用，复杂场景不推荐
function SimpleConditional() {
  const [isVisible, setIsVisible] = createSignal(true);
  return (
    <div>
      {isVisible() && <p>This is visible.</p>}
      <button onClick={() => setIsVisible(v => !v)}>Toggle</button>
    </div>
  );
}
```

## 2. 列表渲染

SolidJS 的列表渲染通过 `For` 组件实现，它提供了高效的键控 (keyed) 列表渲染，类似于 React 的 `map` 结合 `key`。

### 2.1 使用 `For` 组件

`For` 组件接受一个 `each` 属性（一个数组信号或计算属性），并为数组中的每个项渲染其 `children`。`key` 属性是可选的，但强烈推荐提供一个稳定且唯一的 `key`，以优化列表更新性能。

```jsx
import { createSignal, For } from 'solid-js';

function TodoList() {
  const [todos, setTodos] = createSignal([
    { id: 1, text: 'Learn SolidJS', completed: false },
    { id: 2, text: 'Build an App', completed: false },
  ]);

  const addTodo = () => {
    const newTodo = { id: todos().length + 1, text: 'New Todo', completed: false };
    setTodos([...todos(), newTodo]);
  };

  return (
    <div>
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        <For each={todos()} fallback={<p>No todos yet!</p>}>
          {(todo, i) => (
            <li>
              {todo.text} - {todo.completed ? 'Done' : 'Pending'}
            </li>
          )}
        </For>
      </ul>
    </div>
  );
}
```

### 2.2 键控列表 (Keyed Lists)

`For` 组件默认使用索引作为 `key`，但这在列表项顺序改变或有增删时会导致性能问题和不正确的行为。因此，始终为 `For` 组件提供一个稳定的、唯一的 `key`。

```jsx
// 推荐使用唯一的 ID 作为 key
<For each={todos()} fallback={<p>No todos yet!</p>}>
  {(todo) => <li key={todo.id}>{todo.text}</li>}
</For>
```

### 2.3 避免在 `For` 循环中创建信号

在 `For` 循环内部直接创建信号会导致性能问题，因为每次列表更新时都会重新创建信号。如果需要响应式地处理列表项的内部状态，应将列表项封装到独立的组件中，并在该组件内部管理其状态。

## 3. 最佳实践

- **优先使用内置组件**: 对于条件渲染和列表渲染，优先使用 SolidJS 提供的 `Show`、`Switch/Match` 和 `For` 组件。
- **提供唯一的 `key`**: 在 `For` 组件中始终提供一个稳定的、唯一的 `key`。
- **避免短路逻辑的滥用**: 避免在复杂场景下使用 `&&` 或 `||` 进行条件渲染。
- **封装列表项**: 如果列表项有自己的内部状态或复杂逻辑，将其封装到独立的组件中。