React集成preact-signal组件不重新渲染问题排查与修复

问题概述 #

你在测试Preact Signals的React项目中遇到了组件不更新的问题：信号值已通过console.log确认修改，但页面视图完全没有同步。无论是setInterval自动修改信号，还是按钮点击手动修改信号，都无法触发组件重新渲染。

核心原因 #

1. 缺失依赖包：你的package.json中没有安装@preact/signals-react，这是React中使用Preact Signals的必要依赖。
2. 未建立信号订阅：React组件默认不会自动追踪Preact Signals的变化，必须通过特定方式让组件与信号建立订阅关系，否则信号更新无法触发组件重渲染。

修复步骤 #

1. 安装必要依赖 #

首先在项目根目录执行命令安装@preact/signals-react：

npm install @preact/signals-react
# 或使用yarn
yarn add @preact/signals-react

2. 让组件订阅信号变化 #

有两种常用方式实现组件与信号的订阅，任选其一即可：

方式一：使用useSignals高阶函数包裹组件

修改你的组件文件（Component.js），用useSignals包裹组件定义，让组件自动追踪信号变化：

import { signal, computed, useSignals } from '@preact/signals-react';

const name = signal("Name")
const count = signal(0);
const double = computed(() => count.value * 2);

setInterval(() => {
  name.value = Math.random().toString(36).substring(2, 8);
  console.log(name.value);
}, 500)

name.value = "New value 1";

// 用useSignals包裹组件，建立信号订阅
const Comp = useSignals(function Comp() {
  console.log("Render Comp");
  
  return (
    <div>
      <h2>Name - {name.value}</h2>  
      <button onClick={() => {
        name.value = "blablabla";
        console.log(name.value);
      }}>Change</button> 

      <button onClick={() => {
        count.value++;
        console.log(double.value);
      }}>
        {count.value} x 2 = {double.value}
      </button>                     
    </div>
  );
});

export { Comp };

方式二：使用SignalsProvider全局包裹

修改App.js，用SignalsProvider包裹整个应用，让所有子组件都能自动追踪信号变化：

import logo from './logo.svg';
import './App.css';
import { Comp } from './components/Component';
import { SignalsProvider } from '@preact/signals-react';

function App() {
  console.log("Render App");
  
  return (
    <SignalsProvider>
      <div className="App">
        <Comp></Comp>
      </div>
    </SignalsProvider>
  );
}

export default App;

关键说明 #

• useSignals会将组件转换为响应式组件，自动订阅其内部使用的所有信号，当信号值变化时触发重渲染。
• SignalsProvider是全局解决方案，所有在Provider内部的组件都会自动具备信号追踪能力，适合大型项目使用。
• 对于computed信号，在JSX中可以直接使用double或double.value，两者效果一致，但使用.value更直观。

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