Preact组件中useState状态切换异常触发两次的问题排查

这个问题我之前碰到过类似的情况，核心原因是Preact的虚拟DOM diff算法会尽可能复用现有DOM元素，再结合浏览器的事件冒泡机制，导致一次点击触发了两次toggle函数调用。

具体分析第一个案例的触发流程： #

1. 初始渲染时，组件返回的结构是：

   <div> <!-- 根div，无onClick绑定 -->
     <div onClick={toggle}>Close</div> <!-- 内层div，绑定toggle事件 -->
   </div>
   

   此时控制台输出true，符合预期。

2. 点击“Close”按钮后：

   • 内层div的onClick先触发，调用toggle，控制台输出toggle，isOpen被设为false。
   • 组件重新渲染，返回的结构变为：

     <div onClick={toggle}>Open</div> <!-- 根div，绑定toggle事件 -->
     

   • Preact的diff算法发现新旧根节点都是<div>，于是直接复用了原来的根div：移除它的子元素，同时给这个根div添加onClick={toggle}事件。
   • 但此时，第一次点击的事件还处于冒泡阶段（内层div的点击事件会向上冒泡到父元素），而复用后的根div已经绑定了toggle，所以冒泡事件会触发这个新绑定的onClick，导致toggle再次被调用，isOpen又被设回true。
   • 最终控制台就出现了toggle → false → toggle → true的输出，和你看到的结果完全一致。

不同DOM结构表现差异的原因： #

• 当else分支返回三层div时，新旧根节点都是无onClick的<div>，Preact复用根div后只会替换子元素，根div没有事件绑定，所以第一次点击的冒泡不会触发额外的toggle。但后续切换时，DOM结构的变化又会触发类似的复用问题，导致两次调用。
• 当你统一用两层div结构时，新旧根节点都是无onClick的<div>，子元素才是绑定toggle的节点，Preact只会更新内层子元素的内容，根div始终没有事件绑定，冒泡不会触发额外调用，所以表现完全正常。

解决方案 #

方案1：给根元素添加唯一key，强制Preact不复用DOM

通过给两个分支的根div添加不同的key，明确告诉Preact这是两个完全独立的元素，需要销毁旧元素、创建新元素，避免复用带来的事件问题：

function App() {
  const [isOpen, setIsOpen] = useState(true);

  function toggle() {
    console.log('toggle');
    setIsOpen(!isOpen);
  }

  console.log(isOpen);

  if (isOpen) {
    return (
      <div key="open-container">
        <div onClick={toggle}>Close</div>
      </div>
    );
  } else {
    return <div key="close-container" onClick={toggle}>Open</div>;
  }
}

方案2：阻止事件冒泡

在内层按钮的onClick回调中调用e.stopPropagation()，切断事件向上冒泡的路径，即使父元素被复用并绑定了事件，也不会被触发：

function toggle(e) {
  e.stopPropagation(); // 阻止事件冒泡到父元素
  console.log('toggle');
  setIsOpen(!isOpen);
}

方案3：统一DOM结构

保持两个分支的DOM结构完全一致，让Preact只更新内容而不是修改根元素的事件绑定，就像你最后那个正常工作的案例一样：

if (isOpen) {
  return (
    <div>
      <div onClick={toggle}>Close</div>
    </div>
  );
} else {
  return (
    <div>
      <div onClick={toggle}>Open</div>
    </div>
  );
}

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