React Signals控制MUI Dialog无法打开的问题咨询

我尝试用@preact/signals-react的signal控制MUI Dialog的显示，但即便在<p>标签中，signal的值也无法同步到UI。控制台中能看到signal的value确实发生了变化，但点击FAB后Dialog毫无反应。改用useState能正常工作，但会触发整个应用重渲染。我后来通过将组件嵌套到父组件并使用state解决了问题，但仍想知道signal失效的原因。

代码示例 #

App.jsx #

import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import "./App.css";

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

const addItemDialog = signal(false);

function App() {
    console.log("Render App");

    const fabStyle = {
        position: "absolute",
        bottom: 16,
        right: 16,
    };

    function openDialog() {
        addItemDialog.value = true;
    }

    return (
        <>
            <p>{addItemDialog.value}Test</p>
            <AddItemDialog addItemDialog={addItemDialog} />
            <Fab sx={fabStyle} color="primary" onClick={openDialog}>
                <AddIcon />
            </Fab>
        </>
    );
}

export default App;

AddItemDialog.jsx #

import React, { useRef } from "react";
import { Dialog, DialogTitle, DialogContent } from "@mui/material";

export default function AddItemDialog({ addItemDialog }) {
    console.log("Render Dialog");

    const name = useRef();

    function close() {
        addItemDialog.value = false;
    }

    return (
        <Dialog open={addItemDialog.value} onClose={close} fullWidth maxWidth="sm">
            <DialogTitle>Add Item</DialogTitle>
            <DialogContent>
                <input type="text" ref={name} />
            </DialogContent>
        </Dialog>
    );
}

问题原因分析 #

1. 全局signal未绑定组件渲染周期
   你在组件外部定义了全局的addItemDialog signal，而React组件无法自动订阅全局signal的变化。Preact Signals的自动更新依赖于组件渲染过程中对.value的访问追踪，全局signal脱离了组件上下文，其值变化无法触发组件重新渲染。

2. 组件未建立signal依赖追踪
   App和AddItemDialog组件虽然访问了addItemDialog.value，但由于signal是全局的，没有与组件的渲染生命周期绑定。React组件的更新触发机制依赖状态变化的通知，全局signal的变更无法传递这个通知，导致UI无法同步更新。

修正方案 #

方式1：使用useSignal在组件内创建signal #

将全局signal改为用useSignal钩子在组件内部创建，让signal与组件上下文绑定，自动追踪更新：

// App.jsx 修改后
import { useSignal } from "@preact/signals-react";

function App() {
    // ... 其他代码
    const addItemDialog = useSignal(false); // 组件内创建signal
    // ... 其他代码
}

方式2：子组件用useSignalValue订阅外部signal #

如果需要传递外部signal到子组件，可以用useSignalValue钩子让子组件直接订阅signal变化，避免依赖父组件重渲染：

// AddItemDialog.jsx 修改后
import { useSignalValue } from "@preact/signals-react";

export default function AddItemDialog({ addItemDialog }) {
    const isOpen = useSignalValue(addItemDialog); // 订阅signal变化
    // ... 其他代码
    return (
        <Dialog open={isOpen} onClose={close} fullWidth maxWidth="sm">
            // ... 其他代码
        </Dialog>
    );
}

总结 #

问题核心是全局signal未与React组件的渲染周期绑定，导致组件无法追踪其变化。使用useSignal（组件内创建）或useSignalValue（订阅外部signal）可以让组件正确响应signal更新，同时保留Signals精准更新的优势，避免全量重渲染。

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