6

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

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

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

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

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 调用。

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

4

2 回答 2

10

据我所知，函数的标识在添加/删除 EventListener 中很重要，因此如果函数在两者之间发生变化，它就不起作用。

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

简单的步骤将是： 使用 - 声明事件函数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]);
}
于 2019-09-30T10:17:45.500 回答
1

@ckedar 的方案可以解决这个问题，但是存在性能问题，当eventListener 发生变化时，react 会在dom 上remove 和addEvent。</p>

你可以useRef()改用useState()，如果你想改变监听状态，你可以使用useStateRef()：

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

export default function useStateRef(initialValue:any): Array<any>{
  const [value, setValue] = useState(initialValue);
  const ref = useRef(value);
  useEffect(() => {
    ref.current = value;
  },[value])
  return [value,setValue,ref];
}
于 2020-12-11T07:48:00.087 回答