Javascript useEffect 中的 addEventListener 添加的单击事件在安装组件时被触发

这是一个奇怪的行为，但似乎"mount Child"按钮Click被传播到了document和Child组件的useEffect钩子的回调中，添加了"Click"事件的侦听器仍然能够拾取该Click事件并触发handleClick回调.

我建议阻止按钮的点击事件传播...用户正在单击按钮，而不仅仅是文档中的任何位置，对吧.

示例:

import { useState } from "react";
import Child from "./Child";

function App() {
  const [value, setValue] = useState(false);

  const clickHandler = e => {
    e.stopPropagation(); // <-- prevent click event propagation up the DOM
    setValue(true);
  }

  return (
    <div>
      <button onClick={clickHandler}>Mount Child</button>
      {value && <Child />}
    </div>
  );
}

export default App;

此外，在Child组件中有一些关于useEffect挂钩和事件侦听器逻辑的逻辑错误.useEffect钩子缺少依赖项数组，因此无论何时呈现Child，它都会删除并重新添加Click事件侦听器.handleClick也被声明107为useEffect钩子，因此它是一个外部依赖项，在每个呈现周期中被重新声明，并且还将在每次呈现时触发useEffect钩子.应该移到效果回调中.

在这里，我们添加一个空的依赖项数组，以便每次组件挂载时效果只运行一次，建立事件侦听器，并在组件卸载时删除它们.

示例:

import React, { useEffect } from "react";

function Child() {
  useEffect(() => {
    const handleClick = () => {
      console.log("hi");
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
      console.log("unmounting");
    };
  }, []);

  return <div>Child</div>;
}

export default Child;