在 Preact 中，直接修改跨组件共享的 signal() 值（如 clicked.value = false）可能触发渲染冲突错误；正确做法是使用 effect() 将状态变更延迟到渲染完成后的副作用阶段，避免同步更新导致的“渲染中修改”异常。
在 preact 中，直接修改跨组件共享的 `signal()` 值（如 `clicked.value = false`）可能触发渲染冲突错误；正确做法是使用 `effect()` 将状态变更延迟到渲染完成后的副作用阶段，避免同步更新导致的“渲染中修改”异常。
在 Preact（尤其是使用 @preact/signals）开发时，signal() 创建的响应式状态非常适合跨组件共享。但需特别注意：不能在组件渲染函数内部（即 JSX 返回前）直接赋值修改 signal 值——这会破坏 Preact 的渲染调度机制，引发经典错误：
Cannot update a component (CalendarBase) while rendering a different component (MiniTodo)
该错误的本质是：你在 MiniTodo 组件的渲染过程中（例如事件处理函数未加防护、或在 JSX 中直接调用赋值）修改了被 CalendarBase 依赖的 signal，导致框架试图在尚未完成当前渲染树时触发新一轮重渲染，从而违反一致性约束。
✅ 正确解法：使用 effect() 实现安全的异步/延迟更新effect() 是 signals 提供的副作用注册工具，它确保回调在当前渲染周期结束后、DOM 更新完成后执行，天然规避渲染中修改问题：
import { effect, signal } from '@preact/signals';
export const clicked = signal(false);
// 在 MiniTodo 组件中（或其他需要重置的组件）
const handleResetClick = () => {
// ✅ 安全：effect 将赋值推迟到渲染后
effect(() => {
clicked.value = false;
});
};
⚠️ 注意事项：
❌ 避免在事件处理器内直接写
clicked.value = false（尤其当该处理器被同步调用时，如按钮onClick的默认行为）；-
✅ 推荐封装为可复用的工具函数，例如：
export const resetClicked = () => effect(() => clicked.value = false);
-
? 若需多次重置且不希望累积
effect，可配合cleanup或使用useEffect（Preact 10.10+）替代：import { useEffect } from 'preact/hooks'; useEffect(() => { clicked.value = false; }, []); // 空依赖数组确保仅在挂载后执行一次 ? 补充说明：
signal()值本身是可变的，但变更时机必须受控；effect()不是“绕过规则”，而是遵循 signals 设计哲学——将副作用显式声明并交由框架调度。
总结：跨组件更新 signal 的核心原则是 “读取自由，写入守时” ——任意组件均可安全读取 .value，但写入操作必须置于 effect()、useEffect、用户事件回调（非渲染中）等生命周期安全上下文中。这样既保持响应式数据流的简洁性，又确保渲染稳定性。
