内置组件
<For>
高效渲染项目列表，基于项目本身的标识进行键控更新。这使得它在项目被添加、移除或重新排序的列表中非常高效。
类型：
For<T extends readonly any[], U extends JSX.Element>(props: ForProps<T, U>): JSX.Element
参数：
each: 要渲染的项目数组或假值children: 为每个项目返回组件的函数，接收项目和一个响应式索引fallback: 数组为空时的可选备用内容
示例：
function ListComponent() {
const [items, setItems] = useSignal([1, 2, 3])
return (
<For each={items()}>
{(item, index) => (
<div key={item}>
项目 {index() + 1}: {item}
</div>
)}
</For>
)
}
<Index>
使用基于索引的跟踪来渲染列表以实现高效更新。与 <For> 不同，它通过项目在数组中的位置而不是它们的标识来跟踪项目，这对于频繁更新但不重新排序的列表可能更高效。
类型：
Index<T extends readonly any[], U extends JSX.Element>(props: IndexProps<T, U>): JSX.Element
参数：
each: 要渲染的项目数组或假值children: 为每个项目返回组件的函数，接收项目的响应式获取器和静态索引fallback: 数组为空时的可选备用内容
示例：
function IndexListComponent() {
const [items, setItems] = useSignal(['a', 'b', 'c'])
return (
<Index each={items()}>
{(item, index) => (
<div>
{index}: {item()}
</div>
)}
</Index>
)
}
<Show>
根据布尔值条件渲染内容。在条件变化时提供高效更新。
类型：
Show<T>(props: ShowProps<T>): JSX.Element
参数：
when: 决定是否显示内容的布尔值children: 当 when 为 true 时要显示的内容。可以是 JSX 元素或接收 when 解析值的函数fallback: 当 when 为 false 时显示的可选内容keyed: 可选标志，将块与 when 的值关联，当 when 是对象引用时很有用
示例：
function ConditionalComponent() {
const [isVisible, setIsVisible] = useSignal(true)
const [user, setUser] = useSignal({ name: 'John' })
const [theme, setTheme] = useSignal('light')
return (
<>
{/* 基本用法 */}
<Show when={isVisible()} fallback={<p>Not visible</p>}>
<p>Visible content</p>
</Show>
{/* 使用函数子元素 */}
<Show when={user()}>
{(userData) => <p>Welcome, {userData().name}!</p>}
</Show>
{/* 使用键控模式 */}
<Show when={theme()} keyed>
{(currentTheme) => (
<div>{currentTheme === 'dark' ? '深色主题' : '浅色主题'}</div>
)}
</Show>
</>
)
}
<Switch>
渲染第一个匹配的案例组件。类似于 switch 语句，但用于 JSX 内容。
类型：
Switch(props: SwitchProps): JSX.Element
参数：
fallback: 没有案例匹配时显示的可选内容children: <Match> 组件列表
示例：
function SwitchComponent() {
const [value, setValue] = useSignal('b')
return (
<Switch fallback={<p>值是其他内容</p>}>
<Match when={value() === 'a'}>
<p>值是 A</p>
</Match>
<Match when={value() === 'b'}>
<p>值是 B</p>
</Match>
<Match when={value() === 'c'}>
<p>值是 C</p>
</Match>
</Switch>
)
}
<Match>
与 <Switch> 一起使用的组件，用于定义条件案例。
类型：
Match<T>(props: MatchProps<T>): JSX.Element
参数：
when: 决定是否应渲染此案例的布尔条件keyed: 启用键控模式的可选标志children: 如果条件为 true 时要渲染的内容。可以是 JSX 元素或函数
示例：
function MatchExample(props) {
return (
<Match when={props.value === 'a'}>
<p>值是 A</p>
</Match>
)
}
<ErrorBoundary>
捕获子组件中的错误并渲染备用 UI。防止错误向上传播到组件树。
类型：
ErrorBoundary(props: ErrorBoundaryProps): JSX.Element
参数：
fallback: 发生错误时返回备用 UI 的函数。它接收错误和一个重置函数children: 要包装的子组件
示例：
function ErrorProneComponent() {
const [triggerError, setTriggerError] = useSignal(false)
if (triggerError()) {
throw new Error('出错了!')
}
return <button onClick={() => setTriggerError(true)}>触发错误</button>
}
function ErrorBoundaryExample() {
return (
<ErrorBoundary
fallback={(error, reset) => (
<div>
<p>错误：{error.message}</p>
<button onClick={reset}>重置</button>
</div>
)}
>
<ErrorProneComponent />
</ErrorBoundary>
)
}
