面试题：Solid.js响应式系统下createSignal与createEffect的性能优化

优化思路

批量更新：Solid.js 提供了 batch 函数，它允许将多个状态更新合并为一个单一的更新，减少不必要的重新渲染。在进行大量数据更新时，将这些更新包裹在 batch 函数内。
减少依赖：仔细分析 createEffect 的依赖，确保只有必要的数据变化才会触发 createEffect 执行。避免在 createEffect 中依赖不必要的信号，只依赖真正影响其逻辑的信号。
使用Memoization（记忆化）：对于一些计算开销较大的函数，使用 createMemo 进行记忆化。createMemo 会缓存其返回值，只有当依赖的信号发生变化时才会重新计算。
虚拟列表：在处理大量列表数据时，采用虚拟列表技术。只渲染当前可见的列表项，而不是全部渲染，这样可以显著减少渲染开销。

代码示例

批量更新示例

import { createSignal, batch } from 'solid-js';

const [count, setCount] = createSignal(0);
const [name, setName] = createSignal('');

const handleClick = () => {
  batch(() => {
    setCount(count() + 1);
    setName('new name');
  });
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Update</button>
      <p>Count: {count()}</p>
      <p>Name: {name()}</p>
    </div>
  );
};

export default App;

减少依赖示例

import { createSignal, createEffect } from'solid-js';

const [count, setCount] = createSignal(0);
const [unrelatedValue, setUnrelatedValue] = createSignal('');

createEffect(() => {
  // 只依赖 count，不依赖 unrelatedValue
  console.log('Count changed:', count());
});

const App = () => {
  return (
    <div>
      <button onClick={() => setCount(count() + 1)}>Increment Count</button>
      <button onClick={() => setUnrelatedValue('new value')}>Change Unrelated</button>
    </div>
  );
};

export default App;

Memoization示例

import { createSignal, createMemo } from'solid-js';

const [a, setA] = createSignal(1);
const [b, setB] = createSignal(2);

const sum = createMemo(() => a() + b());

const App = () => {
  return (
    <div>
      <input type="number" value={a()} onChange={(e) => setA(Number(e.target.value))} />
      <input type="number" value={b()} onChange={(e) => setB(Number(e.target.value))} />
      <p>Sum: {sum()}</p>
    </div>
  );
};

export default App;

虚拟列表示例（简化示意，实际需引入相关库如 react - virtualized 的 Solid.js 适配版本）

import { createSignal } from'solid-js';

const totalItems = 1000;
const visibleCount = 10;
const [startIndex, setStartIndex] = createSignal(0);

const items = Array.from({ length: totalItems }, (_, i) => i + 1);

const visibleItems = () => items.slice(startIndex(), startIndex() + visibleCount);

const App = () => {
  return (
    <div>
      <ul>
        {visibleItems().map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={() => setStartIndex(startIndex() - 1)} disabled={startIndex() === 0}>Previous</button>
      <button onClick={() => setStartIndex(startIndex() + 1)} disabled={startIndex() + visibleCount >= totalItems}>Next</button>
    </div>
  );
};

export default App;

面试题：Solid.js响应式系统下createSignal与createEffect的性能优化

知识考点

面试题答案

优化思路

代码示例