面试题：Solid.js响应式系统中如何优化依赖追踪

批处理机制

利用Solid.js 内置批处理：Solid.js 自身提供了批处理机制。在 React 中，状态更新默认是批量的，但在 Solid.js 中，需要开发者合理利用。例如，在处理多个相关信号更新时，将这些更新放在 batch 函数内。如下代码：

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

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

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

这样多个信号更新会作为一个批次处理，避免因多次独立更新引发多次不必要的重新渲染。

手动控制依赖收集范围

使用 createMemo 进行细粒度控制：对于复杂应用，可以使用 createMemo 来创建一个只依赖特定信号的 memoized 值。例如，假设一个组件只依赖信号 count 的部分计算结果，而不是 count 本身：

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

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

const doubleCount = createMemo(() => count() * 2);

const MyComponent = () => {
  return <div>{doubleCount()}</div>;
};

这样 MyComponent 只会在 count 变化影响到 doubleCount 计算结果时重新渲染，而不是每次 count 变化都渲染。 2. 组件拆分与隔离：将依赖不同信号子集的部分拆分成独立的组件。例如，应用中有一个大组件依赖信号 a、b、c，可以将依赖 a 的部分拆分成一个组件，依赖 b、c 的部分拆分成另一个组件。这样当 a 变化时，只重新渲染依赖 a 的组件，而不影响其他组件。

import { createSignal } from'solid-js';

const [a, setA] = createSignal(0);
const [b, setB] = createSignal('');
const [c, setC] = createSignal(false);

const ComponentA = () => {
  return <div>{a()}</div>;
};

const ComponentBC = () => {
  return <div>{b()} {c()}</div>;
};

const BigComponent = () => {
  return (
    <div>
      <ComponentA />
      <ComponentBC />
    </div>
  );
};

通过这种方式，精确控制每个组件的依赖范围，减少不必要的重新渲染。

星途面试题库

面试题：Solid.js响应式系统中如何优化依赖追踪

知识考点

面试题答案

批处理机制

手动控制依赖收集范围