使用Preact Signals时组件整体重渲染问题排查

你当前的代码里，Home组件的渲染逻辑直接访问了toggle.value，这会让整个组件订阅该信号的变化。当toggle.value修改时，Preact会重新执行整个组件的渲染流程，导致所有子元素（包括<p>标签）都跟着重渲染。

解决方案1：拆分依赖信号的部分为子组件 #

把需要使用信号的按钮单独封装成子组件，这样只有子组件会订阅信号变化，父组件不会被触发重渲染：

import { useSignal } from "@preact/signals";

function ToggleButton({ toggle }) {
  return (
    <button onClick={() => (toggle.value = !toggle.value)}>
      {toggle.value ? "yes" : "no"}
    </button>
  );
}

export function Home() {
  const toggle = useSignal(false);

  return (
    <div>
      <ToggleButton toggle={toggle} />
      <p>This won't re-render when 'toggle.value' changes.</p>
    </div>
  );
}

解决方案2：使用Signals的自动订阅语法糖 #

通过$前缀访问信号值（Preact Signals提供的语法糖），Preact会自动为单个DOM元素建立订阅，仅更新使用信号的元素而非整个组件：

import { useSignal, $ } from "@preact/signals";

export function Home() {
  const toggle = useSignal(false);

  return (
    <div>
      <button onClick={() => (toggle.value = !toggle.value)}>
        {$toggle ? "yes" : "no"}
      </button>
      <p>This won't re-render when 'toggle.value' changes.</p>
    </div>
  );
}

这里的$toggle等价于toggle.value，但它只会让按钮元素单独订阅信号变化，不会触发整个Home组件的重渲染。

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