使用信号时整个组件正在重新渲染

Question

为什么我的整个组件被重新渲染，即使我正在使用新的“信号”库？我究竟做错了什么？只有按钮应该被重新渲染，而不是整个组件。

注意：我使用 Preact 开发人员工具来测试组件，并激活了“突出显示更新”选项。这显示了正在重新渲染的组件部分。

这是代码：

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

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

  return (
    <div>
      <button onClick={() => (toggle.value = !toggle.value)}>
        {toggle.value ? "yes" : "no"}
      </button>
      <p>This is re-rendered every time 'toggle.value' changes.</p>
    </div>
  );
}

Answer 1

要利用渲染优化，您需要直接在组件中使用信号；使用

.value

展开会禁用此功能。 文档

如果您想根据信号值显示不同的文本，最好的选择是在以下位置添加

computed

：

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

export function Home() {
  const toggle = useSignal(false);
  const toggled = useComputed(() => (toggle.value ? "yes" : "no"));

  return (
    <div>
      <button onClick={() => (toggle.value = !toggle.value)}>
        {toggled}
      </button>
      <p>This is re-rendered every time 'toggle.value' changes.</p>
    </div>
  );
}

注意：如果可能的话，通常最好使用非钩子函数（

signal

和

computed

与

useSignal

和

useComputed

）。