CRA项目中Preact Signals使用问题：useSignal值无法渲染

问题核心是Create React App（CRA）默认不会读取根目录的babel.config.js，导致你安装的@preact/signals-react-transform插件未生效——这个插件的作用是自动追踪signal.value的访问，触发组件重渲染。没有它的话，即使signal的值变化，组件也不会更新。

以下是几种可行的解决方法：

方法一：用react-app-rewired修改Babel配置（推荐） #

这个方法无需eject，能保留CRA的升级能力：

1. 安装必要依赖：

npm install --save-dev react-app-rewired customize-cra

2. 在项目根目录创建config-overrides.js文件，内容如下：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin(["module:@preact/signals-react-transform"])
);

3. 修改package.json中的scripts命令，替换为：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重启开发服务器，点击按钮后页面数值应该会正常更新。

方法二：手动追踪Signal变化（无需修改Babel） #

如果不想额外安装依赖，可以手动监听signal的变化，触发组件重渲染：
修改你的App.js代码：

import { useSignal, useSignalEffect } from '@preact/signals-react';
import { useState } from 'react';

function App() {
    const count = useSignal(0);
    const [, forceUpdate] = useState({});

    // 追踪count的变化，自动触发重渲染
    useSignalEffect(() => {
        count.value; // 访问value建立依赖关联
        forceUpdate({});
    });

    return (
        <button
            onClick={() => {
                count.value++;
                console.log(count.value);
            }}
        >
            Value: {count.value}
        </button>
    );
}

export default App;

或者也可以把signal的值同步到React本地状态：

import { useSignal } from '@preact/signals-react';
import { useState, useEffect } from 'react';

function App() {
    const count = useSignal(0);
    const [localCount, setLocalCount] = useState(count.value);

    useEffect(() => {
        // 订阅signal变化，同步到本地状态
        const unsubscribe = count.subscribe(newValue => setLocalCount(newValue));
        return unsubscribe;
    }, [count]);

    return (
        <button
            onClick={() => {
                count.value++;
                console.log(count.value);
            }}
        >
            Value: {localCount}
        </button>
    );
}

export default App;

方法三：Eject CRA（不推荐） #

如果你能接受eject后无法再更新CRA，可以执行：

1. 运行npm run eject（此操作不可逆）
2. 在项目根目录的config/webpack.config.js中找到Babel配置部分，添加@preact/signals-react-transform插件
3. 重启开发服务器即可生效

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