如何删除React组件中的窗口EventListener？

Question

代码的平静显示用户鼠标坐标，它可以正常工作。

但是我也想通过单击停止按钮来删除事件处理程序。不幸的是，这似乎是错误的，因为即使在单击按钮后，事件处理程序仍在跟踪和更改位置：

import { useEffect, useState } from 'react'

function MouseCords() {
    const [position, setPosition] = useState({ x: 0, y: 0 })

    function mouseMoveHandler(event) {
        setPosition({
            x: event.clientX,
            y: event.clientY
        })
    }

    useEffect(() => {
        window.addEventListener('mousemove', mouseMoveHandler)
    }, [])

    return (
        <div>
            <pre>
                x: {position.x}
                <br />
                y: {position.y}
            </pre>
            <button
                onClick={() =>
                    window.removeEventListener('mousemove', mouseMoveHandler)
                }
            >
                STOP
            </button>
        </div>
    )
}

我想上下文可能存在问题，但我不是当然该怎么办来解决它。

顺便说一句，这是React组件，我在App.js中使用它：

import MouseCords from './components/MouseCords'

function App() {
    return (
        <div>
            <MouseCords />
        </div>
    )
}

export default App

Answer 1

在每个渲染上都会重新计算在组件的最高级别上声明的函数，按钮的onclick onclick属性中的匿名函数也将被重新启动。因此，当您尝试删除侦听器时，点击处理程序中的函数引用与侦听器所设置的函数参考不匹配，因此它无法正常工作。

最简单的解决方案是使用 usecallback这将确保仅在第一个渲染时声明该函数（由于空依赖性数组），因此单击处理程序和使用效应函数引用将匹配。

您还应该始终提供'nofollow noreferrer“通过从您的使用中返回一个函数，该函数将清除我在组件的生命周期中引起的任何副作用的副作用。

const { useState, useEffect, useCallback } = React;

function MouseCoords() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const mouseMoveHandler = useCallback((event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY
    });
  }, []);

  useEffect(() => {
    window.addEventListener('mousemove', mouseMoveHandler);
    
    return () => {
      window.removeEventListener('mousemove', mouseMoveHandler);
    };
  }, []);

  return (
    <div>
      <pre>
        x: {position.x}
        <br />
        y: {position.y}
      </pre>
      <button
        onClick={() =>
          window.removeEventListener('mousemove', mouseMoveHandler)
        }
      >
        STOP
      </button>
    </div>
  )
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MouseCoords />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id='root'></div>

另外，您可以通过使用效果完全处理侦听器，并在每次更改时都使用布尔标志来有条件地添加/删除侦听器。在这种情况下，每次依赖关系数组都会发生变化时，“清理”将运行。

const { useState, useEffect, useCallback } = React;

function MouseCoords() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [shouldTrack, setShouldTrack] = useState(true);

  const mouseMoveHandler = useCallback((event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY
    });
  }, []);

  useEffect(() => {
    if (shouldTrack) {
      window.addEventListener('mousemove', mouseMoveHandler);
    
      return () => {
        window.removeEventListener('mousemove', mouseMoveHandler);
      };
    }
  }, [shouldTrack]);

  return (
    <div>
      <pre>
        x: {position.x}
        <br />
        y: {position.y}
      </pre>
      <button
        onClick={() => setShouldTrack(b => !b)}
      >
        {shouldTrack ? 'Stop' : 'Start'}
      </button>
    </div>
  )
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MouseCoords />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Answer 2

useEffect(() => {
        window.addEventListener('mousemove', mouseMoveHandler)

return window.removeEventListener('mousemove', mouseMoveHandler)
    }, [])