React/Redux、useEffect/useSelector、过时闭包和事件监听器

Question

我有一个 React/Redux 类组件，我正在将其转换为功能组件。

以前，它有一个 componentDidMount 回调，该回调为从应用程序中其他位置调度的自定义事件添加了一个事件侦听器。它正在被 useEffect 取代。事件侦听器在触发时调用该组件中其他位置的方法。

此方法执行的操作取决于从选择器检索的值。最初，我传递了 useEffect 一个空的依赖项数组，因此它只会在挂载上添加事件侦听器。然而，显然这会导致选择器值周围的闭包过时。一个可行的解决方案是将选择器作为依赖项传递给它 - 但是，这会导致每次选择器的值发生更改时都会删除/重新添加侦听器，这不太好。

我正在尝试考虑一种解决方案，该解决方案仅添加一次事件侦听器，同时允许被调用的方法访问选择器的当前值。

示例代码：

const currentValue = useSelector(state => getValue(state));

useEffect(() => {
  document.addEventListener('my.custom.event', handleEvent);

  return(() => document.removeEventListener('my.custom.event', handleEvent));
}, []);

const handleEvent = () => {
  console.log(currentValue)
}

按原样，这会在 currentValue 周围创建一个陈旧的闭包，以便在事件触发时，记录的值不一定是最新的。

将 useEffect 中的 [] 更改为 [currentValue] 会产生预期的行为，但会在每次更改 < 时删除/重新添加事件侦听器代码>当前值。

由于这不是组件的状态值，因此无法使用像 console.log(currentValue => console.log(currentValue)) 这样的回调来访问最新值。我还尝试使用 useRef 来保留该值，但我相信每次选择器的值发生变化时我都需要某种方法来更新 ref 值，这并不是一个解决方案。

在实际组件中，currentValue 的值在 Redux 中被其他组件修改，因此将其更改为状态值实际上也是行不通的。

我想知道：

• 是否有解决方案可以在被调用的方法中刷新选择器的值；
• 唯一的解决方案是否是在依赖项更改时删除/重新添加侦听器，或者；
• 是否最好将此组件保留为类组件并完全绕过此问题（componentDidMount 不会遇到过时的关闭问题。）

Answer 1

useRef 方法通常是此问题的解决方案，但您需要另一个 useEffect 来使用 currentValue 更新引用：

const currentValue = useSelector(state => getValue(state));
const valueRef = useRef();

useEffect(() => { valueRef.current = currentValue; }, [currentValue]);

useEffect(() => {
  const handleEvent = () => {
    console.log(valueRef.current)
  }

  document.addEventListener('my.custom.event', handleEvent);

  return(() => document.removeEventListener('my.custom.event', handleEvent));
}, []);

但是，您还可以从 useEffect 中提取整个函数，并在钩子中使用它，这样您就可以轻松创建用于事件处理的自定义钩子：

const useEventHandler = (eventName, eventHandler, eventTarget = document) => {
  const eventHandlerRef = useRef();

  useEffect(() => {
    eventHandlerRef.current = eventHandler;
  });

  useEffect(() => {
    const handleEvent = (...args) => eventHandlerRef?.current(...args);

    eventTarget.addEventListener(eventName, handleEvent);

    return (() => eventTarget.removeEventListener(eventName, handleEvent));
  }, []);
}

使用钩子：

const currentValue = useSelector(state => getValue(state));

useEventHandler('my.custom.event', () => console.log(currentValue))

Answer 2

但是，这会导致每次选择器的值更改时都会删除/重新添加侦听器，这不太好。

为什么这是一个问题？它是否以任何可衡量的方式影响您的应用程序的性能？从不变性的角度来看，如果值发生变化，则事件侦听器会执行不同的操作，因此简单地用不同的事件侦听器替换事件侦听器是有意义的。

如果该值每秒更改多次（例如在每一帧或每次鼠标移动时），那么它确实会对性能产生较小的影响，在这种情况下，Ori Drori 的解决方案可能是一个不错的解决方案，但它使代码更难理解，并且性能增益很小。

但是，如果该值每秒仅更改几次或频率较低，那么我根本不用担心添加和删除事件侦听器。