@preact/signals-react 2.0.0中React组件为何使用counter.value不更新？

我正在使用2.0.0版本的@preact/signals-react实现一个简单的计数器应用：

import { signal } from "@preact/signals-react";

const counter = signal(0);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Count: {counter.value}
        </p>
        <button onClick={() => {
          counter.value += 1;
        }}>
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;

问题在于点击按钮后计数器并未更新。但如果将计数器显示代码改写为：

<p>
  Count: {counter}
</p>

组件就会重新渲染，计数器值也能正常显示。

我原本以为counter.value是访问信号值的正确方式，请问这背后的原因是什么？

这是@preact/signals-react 2.0.0版本特意设计的行为：

• 当你在JSX中直接传入signal实例（比如{counter}）时，库会自动完成两件事：自动解包获取当前值，同时建立订阅关系。一旦signal的值发生变化，订阅机制会触发组件重新渲染，你就能看到更新后的数值。
• 而直接访问counter.value时，在函数组件的渲染上下文里，这种方式不会触发订阅追踪。signal的订阅需要依赖库提供的追踪上下文，如果你只是单纯读取.value，组件不会感知到这个值的后续变化，自然不会重新渲染。

简单来说，2.0.0版本针对React做了优化，让signal实例可以直接在JSX中使用，省去了手动订阅和管理的步骤；而直接用.value更适合在事件回调、useEffect等非渲染追踪的场景中读取值。

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