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]);
}