使用 React 钩子时事件侦听器功能发生变化

Question

我有一个组件，它通过addEventListener和在多个地方使用事件侦听器removeEventListener。使用像这样的组件方法是不够的onMouseMove因为我还需要检测组件外部的事件。

我在组件中使用钩子，其中几个在末尾有依赖数组，特别是useCallback(eventFunction, dependencies)与侦听器一起使用的事件函数。依赖项通常是使用声明的有状态变量useState.

据我所知，函数的身份在 中很重要add/remove EventListener，因此如果函数在两者之间发生变化，它就不起作用。起初我尝试管理钩子，以便事件函数不会改变add和remove但是随着函数对状态的依赖，这很快变得笨拙。

所以最后我想出了以下模式：由于 setter 函数（到 的第二个输入参数useState）获取当前状态作为参数，我可以拥有在第一次渲染后永远不会改变的事件函数（我们是否仍然称此挂载?) 但仍然可以访问最新的有状态变量。一个例子：

import React, { useCallback, useEffect, useState } from 'react';

const Component = () => {
  const [state, setState] = useState(null);

  const handleMouseMove = useCallback(() => {
    setState((currentState) => {
      // ... do something that involves currentState ...
      return currentState;
    });
  }, []);

  useEffect(() => {
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, [/* ... some parameters here ... */]);

  // ... more effects etc ...

  return <span>test</span>;
};

（这是一个非常简化的说明）。

这似乎工作正常，但我不确定它是否感觉很正确 - 使用一个永远不会改变状态的 setter 函数，而只是作为访问当前状态的一种方法。

此外，对于需要多个状态变量的事件函数，我必须嵌套 setter 调用。

是否有另一种模式可以更好地处理这种情况？

Answer 1

据我所知，函数的身份在添加/删除事件监听器中很重要，因此如果函数在两者之间发生变化，它就不起作用。

虽然这是真的，但我们不必极端地安排甚至函数根本不改变身份。

简单的步骤是： 使用useCallback- 依赖项列表声明事件函数useCallback应该包括您的函数所依赖的所有有状态变量。

使用useEffect添加的事件监听器。返回将删除事件侦听器的清理函数。useEffect除了您的效果函数可能正在使用的任何其他有状态变量之外，依赖项列表应包括事件侦听器函数本身。

这样，当事件侦听器使用的任何有状态变量发生变化时，甚至侦听器的身份发生变化，都会触发效果的运行，但在运行效果之前运行返回的效果清理函数时，会正确删除旧的事件侦听器在添加新的之前。

一些关于：

const Component = () => {
    const [state, setState] = useState();

    const eventListner = useCallback(() => {
        console.log(state); // use the stateful variable in event listener
    }, [state]);

    useEffect(() => {
        el.addEventListner('someEvent', eventListner);
        return () => el.removeEventListener('someEvent', eventListner);
    }, [eventListener]);
}