React Hooks：确保useEffect仅在自定义挂钩的数组参数的内容更改时运行的惯用方式

Question

我正在React中创建一个自定义钩子，该钩子为给定的事件集设置事件监听器。 存在默认的事件集，并且在大多数用例中都不希望此自定义钩子的使用者自定义这些事件。 通常，我希望在安装组件时添加事件侦听器，并在卸载组件时将其删除。 但是，我遵循钩子（和eslint(react-hooks/exhaustive-deps)说明eslint(react-hooks/exhaustive-deps)皮棉规则）的原则，希望能够eslint(react-hooks/exhaustive-deps)地处理要监视的事件列表的更改。 用React钩子实现这一目标的最惯用的方法是什么？

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

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指向不同的引用，这意味着效果也每次都运行（由于浅层依赖关系比较）。 理想情况下，我想要一种效果取决于数组内容而不是引用的方法。 实现此目标的最佳方法是什么？

Answer 1

您可以将两个副作用分为两个不同的useEffects 。

1. 您可以在加载时的第一个useEffect运行初始resetInterval 。 您需要运行一次，并且可以使用[]的依赖项。
   但随后，您需要在resetInterval之外提取useEffect 。
   另一个问题是，现在resetInterval在每个渲染期间重新创建。
   因此，您可以将其包装在useCallback 。
   第一个useEffect取决于resetInterval （这会导致useEffect在加载时运行一次，因此将调用resetInterval ）

2. 现在，您可以按照“ eslint（react-hooks / exhaustive-deps）棉绒规则”的建议订阅第二个useEffect中的所有events ，并依赖于[events, interval, resetInterval] 。

结果看起来像下面的＆您可以在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秒）

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

Answer 2

因此，我们需要将events包含在dep中，但是可以肯定的是，我们不希望出现无尽的渲染循环。

选项＃1：使用JSON.stringify或类似方式将字符串作为依赖项而不是数组传递

function useEventWatcher(events = ['click'])
useEffect(() => {
}, [JSON.stringifiy(events.sort())]) 

但是，ESLint仍然会抱怨，因此要么抑制它，要么使用de-stringify：

const eventsStringified = JSON.stringify(events.sort());
useEffect(() => {
 const eventsUnstringified = JSON.parse(eventsStringified);
}, [eventStringified]);

选项2：将设置默认值移到useMemo 。 因此，在未传递events参数的情况下，默认值将参照相同（因此undefined ）

function useEventWatcher(events) {
const eventsOrDefault = useMemo(() => eventsPassed || ['click'], [events]);

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