带有事件侦听器的错误 React useRef 挂钩行为

Question

我对 useRef 行为感到困惑。

1. 在父元素上设置状态
2. 渲染孩子
3. 只听一次，但调用回调两次。 （在儿童中）

  if (ref.current) {
    console.log("listen");
    ref.current.addEventListener("click", (event) => {
      console.log("xxxx click");
      // setCount(count + 1);
    });
  }

但是当我使用 useEffect 时它工作正常。 听一次，调用一次回调。

  useEffect(() => {
    if (!ref.current) return;
    console.log('listen');
    ref.current.addEventListener("click", (event) => {
      console.log("xxx click");
      // setCount(count + 1);
    });
  }, [ref]);

代码沙盒 https://codesandbox.io/s/exciting-platform-v4ugq?file=/src/comp.jsx

Answer 1

这是因为您的应用程序被封装在严格模式下，在严格模式下 setstate 将呈现两次，尝试在 index.js 中删除严格模式，这解决了问题

For more info