React 18 addEventListent('click') 在组件渲染之前发生的点击触发

Question

单击按钮时，我希望出现模态框。 Modal 组件添加了一个 eventListener，因此当您在模态外部单击时它会关闭。

在 React 18 中，点击事件触发是因为在模式呈现之前发生的按钮点击？

如果我更改为 react 17，则不会发生这种情况。

示例：https://codesandbox.io/s/festive-mopsa-lgke69?file=/src/App.js 当您单击该按钮时，显示状态设置为 true。然后Modal组件渲染，直接调用close函数

Answer 1

您可以调用 event.stopPropagation 来防止多个点击处理程序捕获同一个点击事件。

    onClick={(e) => {
      e.stopPropagation();
      setShow(true);
    }}

我不知道为什么 React 17 和 18 之间会有所不同。React 使用自己的“合成事件”，两个版本之间事件 propagation/bubbling 发生的方式可能有所不同。

它可能与 React 18 中所谓的“自动批处理”有关。 https://github.com/reactwg/react-18/discussions/21

在您的示例中，模态组件使用 document.addEventlistener() 的本机事件处理。似乎 React 18 处理应用程序内部的点击，触发状态更改和重新渲染，安装 Modal 组件，运行 useEffect() 挂钩，并在点击事件发生之前创建新的事件侦听器传播到 window 节点。在 React 17 中，事件可能会在 re-render 发生之前完成传播。

React 18 addEventListent('click') 在组件渲染之前发生的点击触发

React 18 addEventListent('click') triggers on a click that happens before component render

reactjs

react-hooks