SolidJS 有哪些性能优化技巧？如何避免常见的性能陷阱？

SolidJS 的细粒度响应式系统本身已经具备出色的性能基础，但如果不理解其运行机制，仍然容易踩坑。以下是实际开发中最值得关注的优化技巧和常见陷阱。## 一、用 createMemo 缓存昂贵计算，但别滥用createMemo 会缓存计算结果，仅当依赖变化时才重新求值。对于涉及遍历、排序、过滤等开销较大的派生状态，使用 createMemo 能有效减少不必要的重复计算。javascriptconst [items, setItems] = createSignal([]);// 昂贵计算用 memo 缓存const total = createMemo(() => items().reduce((sum, item) => sum + item.price, 0));但对于简单表达式，普通函数就足够了，createMemo 本身也有开销：javascript// 简单派生不需要 memoconst doubled = () => count() * 2;// 只有计算成本高时才值得 memoconst filtered = createMemo(() => items().filter(expensivePredicate));陷阱：不要在 createMemo 中执行副作用。Memo 是纯函数，副作用应该放在 createEffect 中。## 二、用 batch 合并多次更新，减少渲染次数SolidJS 默认在同步代码中会逐次触发响应式更新。如果一个操作中需要修改多个信号，用 batch 包裹可以将它们合并为一次更新：javascriptimport { batch } from 'solid-js';function handleFormSubmit(data) { batch(() => { setName(data.name); setAge(data.age); setEmail(data.email); });}陷阱：在事件处理函数中，SolidJS 的批量机制已经自动生效，不需要手动 batch。但在 setTimeout、Promise 回调等异步场景中，batch 是必要的。## 三、For 与 Index 的选择：动态列表 vs 静态列表SolidJS 提供了两种列表渲染方式，选择错误会带来性能问题：- For：以对象引用作为 key，当列表项被插入或删除时，只会创建/销毁对应项，其余项保持不变。适合动态增删的列表。- Index：以数组索引作为 key，当列表顺序变化时，只会移动已有 DOM 节点而不会销毁重建。适合只读或顺序固定的列表。javascript// 动态列表 - 用 For<For each={todos()}> {(todo) => <TodoItem text={todo.text} done={todo.done} />}</For>// 静态列表 - 用 Index 更高效<Index each={columns()}> {(col, i) => <Column name={col().name} index={i} />}</Index>陷阱：用 Index 渲染频繁增删的列表，会导致 DOM 节点频繁创建和销毁，性能反而更差。## 四、用 lazy 和 Suspense 实现代码分割大型应用中，将非首屏组件用 lazy 延迟加载，能显著减小初始包体积：javascriptimport { lazy, Suspense } from 'solid-js';const Dashboard = lazy(() => import('./Dashboard'));const Settings = lazy(() => import('./Settings'));function App() { return ( <Suspense fallback={<p>加载中...</p>}> <Dashboard /> <Settings /> </Suspense> );}技巧：将 Suspense 边界放在尽可能靠近懒加载组件的位置，这样其他不受影响的内容可以正常显示。## 五、避免不必要的响应式包装SolidJS 的响应式系统会追踪信号读取。如果一个值不需要被追踪，就不要创建信号：javascript// 错误：用 createSignal 包装不需要独立追踪的派生值const [doubled, setDoubled] = createSignal(count() * 2);// 正确：简单派生用函数即可const doubled = () => count() * 2;// 需要缓存时才用 createMemoconst expensive = createMemo(() => computeHeavy(items()));陷阱：SolidJS 组件函数体只执行一次。如果在组件函数体中读取信号但不处于响应式上下文（如 JSX、createEffect、createMemo）内，该读取只发生在初始化阶段，后续信号变化不会触发更新。## 六、用 untrack 隔离不需要追踪的依赖在 createEffect 中读取信号会自动建立依赖关系。但有时你只需要读取当前值，不想因此触发 effect 重新执行：javascriptimport { untrack } from 'solid-js';createEffect(() => { const currentUserId = userId(); // 依赖：userId 变化时重新执行 const theme = untrack(() => theme()); // 不追踪：theme 变化不会触发此 effect fetchUserData(currentUserId, theme);});典型场景：日志记录、分析上报等需要读取但不需响应变化的场景。## 七、用 Store 管理复杂嵌套状态当状态是深层嵌套的对象时，用 createStore 替代多个 createSignal。Store 提供细粒度的嵌套响应式追踪，只有真正变化的属性才会触发更新：javascriptimport { createStore } from 'solid-js/store';const [user, setUser] = createStore({ profile: { name: 'Alice', age: 28 }, settings: { theme: 'dark', lang: 'zh' }});// 只更新 profile.name，settings 不会触发任何更新setUser('profile', 'name', 'Bob');陷阱：直接给 Store 属性赋整个新对象会丢失细粒度更新。使用 reconcile 可以智能地对比新旧数据，只更新变化的部分：javascriptimport { reconcile } from 'solid-js/store';setUser(reconcile(newUserData));## 八、不要解构 props这是 SolidJS 中最常见的反模式之一。解构会破坏响应式追踪，因为解构发生在组件函数体中（只执行一次），此时读取的是初始值：javascript// 错误：解构丢失响应式function UserCard({ name, avatar }) { return <div>{name}</div>; // name 永远是初始值}// 正确：通过 props 函数调用保持响应式function UserCard(props) { return <div>{props.name}</div>;}如果需要在派生逻辑中使用 props，用 mergeProps 或 splitProps：javascriptimport { mergeProps, splitProps } from 'solid-js';function MyComponent(props) { const [local, rest] = splitProps(props, ['className', 'style']); return <div class={local.className} {...rest} />;}## 九、用控制流组件替代条件表达式SolidJS 提供了 Show、Switch/Match 等控制流组件，它们比 JavaScript 条件表达式（三元运算符、&&）更高效，因为控制流组件能精确管理 DOM 节点的创建和销毁：javascriptimport { Show, Switch, Match } from 'solid-js';// 用 Show 替代 && 运算符<Show when={isLoggedIn()} fallback={<LoginForm />}> <Dashboard /></Show>// 用 Switch/Match 替代多重三元表达式<Switch fallback={<p>未知状态</p>}> <Match when={status() === 'loading'}><Spinner /></Match> <Match when={status() === 'error'}><ErrorMessage /></Match> <Match when={status() === 'success'}><Content /></Match></Switch>技巧：Show 的 when 还支持键函数（key function），当条件从 true 变为 false 再变回 true 时，可以用 key 控制是否复用 DOM：javascript<Show when={selectedUser()} keyed> {(user) => <Profile name={user.name} />}</Show>## 十、用 onCleanup 管理副作用生命周期SolidJS 组件没有 unmount 生命周期钩子，但 onCleanup 可以在任何响应式作用域中注册清理逻辑：javascriptimport { onCleanup } from 'solid-js';function Timer() { const [count, setCount] = createSignal(0); const timer = setInterval(() => setCount(c => c + 1), 1000); onCleanup(() => clearInterval(timer)); return <p>{count()}</p>;}典型场景：清除定时器、取消订阅、关闭 WebSocket 连接、释放 WebGPU 资源等。## 十一、避免在 createEffect 中写入信号在 effect 中写入信号是最容易导致无限循环的场景：javascript// 危险：可能导致无限循环createEffect(() => { setCount(count() + 1); // count 变化 -> effect 重新执行 -> count 再变 -> ...});// 正确做法：用 createMemo 派生新值const nextCount = createMemo(() => count() + 1);// 如果确实需要根据依赖执行副作用，确保写入不同的信号createEffect(() => { const id = selectedId(); setFormData(loadForm(id)); // selectedId 和 formData 是不同信号，不会循环});## 总结SolidJS 性能优化的核心思路是：理解细粒度响应式的工作机制，让系统只更新真正需要更新的部分。关键原则包括：合理使用 memo 和 batch、选择正确的列表渲染方式、避免破坏响应式追踪（不解构 props）、用控制流组件替代条件表达式、用 Store 管理复杂状态、以及不在 effect 中写入信号。掌握这些技巧后，SolidJS 的性能优势才能被充分发挥。