3

我在 React 中创建了一个自定义钩子，它为给定的一组事件设置了一个事件侦听器。存在一组默认事件，并且此自定义钩子的使用者预计不会在大多数用例中自定义这些事件。通常，我希望在安装组件时添加事件侦听器，并在卸载组件时将其删除。但是，遵循钩子（和eslint(react-hooks/exhaustive-deps)lint 规则）的原则，我希望优雅地处理对要监视的事件列表的更改。使用 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每次自定义挂钩运行时都指向不同的引用，这意味着效果每次也会运行（由于浅层依赖比较）。理想情况下，我想要一种使效果取决于数组内容而不是引用的方法。实现这一目标的最佳方法是什么？

4

2 回答 2

0

所以我们需要包含events到 deps 中，但我们肯定不想要无休止的渲染循环。

选项#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]);
}
于 2019-07-27T07:51:52.197 回答
0

您可以将两种不同的副作用分开useEffects。

  1. resetInterval您可以在第一次useEffect加载时运行初始值。您需要运行一次，您可能会使用[].
    但是，您需要resetInterval在useEffect.
    另一个问题是，nowresetInterval在每次渲染期间都会重新创建。
    所以你可以把它包装在useCallback.
    第一个useEffect取决于resetInterval（这会导致useEffect加载时运行一次，因此会调用resetInterval）

  2. 现在您可以按照“eslint(react-hooks/exhaustive-deps) lint rule”的建议events在第二个订阅所有useEffect依赖项。[events, interval, resetInterval]

结果如下所示，您可以在 CodeSandbox 上查看工作演示。
编辑 so.answer.57227862

    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 秒）

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

工作演示

于 2019-07-27T04:21:09.690 回答