SolidJS中如何避免依赖关联场景下computed的重复执行？

当一个计算值依赖两个信号S1和S2，且S2既是可独立修改的信号，又通过effect基于S1计算更新时，修改S1会导致计算值执行两次：第一次是S1变更时触发，第二次是S2因S1变更完成更新后再次触发。

示例代码如下：

function Counter() {
  const [a, setA] = createSignal(1);
  const [b, setB] = createSignal(2);
  const sum = () => {
    console.log('sum')
    return a() + b();
  }

  createEffect(() => setB(a()))

  return (
    <div>
      <div>{sum()}</div>
      <button onClick={() => setA(a() + 1)}>递增a - {a()}</button>
      <button onClick={() => setB(b() + 1)}>递增b - {b()}</button>
    </div>
  );
}

由于S1和S2会先后发生变化，直接使用createMemo无法解决重复执行的问题，有没有办法避免这次不必要的重复计算？

解决方案 #

可以通过createMemo结合on配置项实现，核心是明确指定计算值的依赖信号，切断不必要的连锁触发。

修改后的示例代码：

function Counter() {
  const [a, setA] = createSignal(1);
  const [b, setB] = createSignal(2);
  
  // 通过on选项指定仅监听b的变更
  const sum = createMemo(() => {
    console.log('sum');
    return a() + b();
  }, { on: [b] });

  createEffect(() => setB(a()));

  return (
    <div>
      <div>{sum()}</div>
      <button onClick={() => setA(a() + 1)}>递增a - {a()}</button>
      <button onClick={() => setB(b() + 1)}>递增b - {b()}</button>
    </div>
  );
}

原理说明 #

• 配置on: [b]后，sum只会在b发生变更时重新计算
• 由于b已经通过createEffect同步了a的变更，修改a最终只会触发一次sum的计算
• 直接修改b时，依然能正常触发sum更新，完全保留原有功能

内容的提问来源于stack exchange，提问作者Nan Li