reactjs - react Hook : Idiomatic way to ensure that useEffect runs only when the contents of an array argument to the custom hook change

Question

我正在 React 中创建一个自定义 Hook ，它为一组给定的事件设置一个事件监听器。存在一组默认事件，并且此自定义 Hook 的使用者不应在大多数用例中自定义这些事件。通常，我希望在安装组件时添加事件监听器，并在卸载组件时将其删除。然而，坚持钩子(Hook)的原则(和 eslint(react-hooks/exhaustive-deps) lint 规则)，我希望优雅地处理要监视的事件列表的更改。使用 React hooks 实现此目的最惯用的方法是什么？

假设我只想删除所有事件监听器并在事件列表更改时重新添加它们，我可以尝试以下操作:

const useEventWatcher = (
  interval = 5000,
  events = ['mousemove', 'keydown', 'wheel']
) => {
  const timerIdRef = useRef();

  useEffect(() => {
    const resetInterval = () => {
      if (timerIdRef.current) {
        clearInterval(timerIdRef.current);
      }

      timerIdRef.current = setInterval(() => { 
        console.log(`${interval} milliseconds passed with no ${events.join(', ')} events!`);
      }, interval)
    };

    events.forEach(event => window.addEventListener(event, resetInterval));

    // Don't want to miss the first time the interval passes without
    // the given events triggering (cannot run the effect after every render due to this!)
    resetInterval();

    return () => {
      events.forEach(event => window.removeEventListener(event, resetInterval));
    };
  }, [events, interval]);
}

不幸的是，这不会按预期运行。请注意，我想为 events 参数提供默认值。使用当前方法执行此操作意味着 events 每次自定义 Hook 运行时都指向不同的引用，这意味着效果每次都会运行(由于浅依赖性比较)。理想情况下，我想要一种使效果取决于数组内容而不是引用的方法。实现这一目标的最佳方式是什么？

Answer 1

您可以在两个不同的 useEffects 中分离两个副作用。

1. 您可以在加载时的第一个 useEffect 中运行初始的 resetInterval。您需要运行一次，并且您可能会使用 [] 的依赖项。
   但是，您需要在 useEffect 之外提取 resetInterval。
   另一个问题是，现在 resetInterval 在每次渲染时都会重新创建。
   所以你可以将它包装在 useCallback 中。
   第一个 useEffect 依赖于 resetInterval(这导致 useEffect 在加载时运行一次，因此将调用 resetInterval)

2. 现在您可以订阅第二个 useEffect 中的所有 events 并依赖于 [events, interval, resetInterval] “eslint(react-hooks/exhaustive-deps) lint 规则”。

结果如下 &您可以在 CodeSandbox 上查看工作演示。

    const useEventWatcher = (
      interval = 2000,
      events = ["mousemove", "keydown", "wheel"]
    ) => {
      const timerIdRef = useRef();

      const resetInterval = useCallback(() => {
        if (timerIdRef.current) {
          clearInterval(timerIdRef.current);
        }

        timerIdRef.current = setInterval(() => {
          console.log(
            `${interval} seconds passed with no ${events.join(", ")} events!`
          );
        }, interval);
      }, [events, interval]);

      useEffect(() => {
        resetInterval();
      }, [resetInterval]);

      useEffect(() => {
        events.forEach(event => window.addEventListener(event, resetInterval));

        return () => {
          events.forEach(event => window.removeEventListener(event, resetInterval));
        };
      }, [events, interval, resetInterval]);
    };

查看工作页面(出于演示目的，我将间隔设置为 2 秒)

当您四处移动鼠标、滚动滚轮或按键时，控制台日志不会出现。一旦未触发这些事件，您将看到控制台日志消息。