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; // 启用开发工具