Callback не запускает изменение размера в React Hook - PullRequest
0 голосов
/ 28 апреля 2020

Я получаю журнал консоли, который запускается внутри хука при каждом изменении размера, однако журнал консоли, который находится в обратном вызове, который передается в хук изменения размера, никогда не срабатывает.

Вот мой хук, который использует useCallbacks для исчерпывающий плагин deps eslint:

// @flow
import { useCallback, useEffect } from 'react';

let resizeId: AnimationFrameID;

export const useResize = (callbackFn: Function, ref?: any) => {
  const resizeUpdate = useCallback(() => {
    console.log('inside');
    callbackFn();
  }, [callbackFn]);

  const handleResize = useCallback(() => {
    cancelAnimationFrame(resizeId);
    resizeId = requestAnimationFrame(resizeUpdate);
  }, [resizeUpdate]);

  const handleOrientation = useCallback(() => {
    // After orientationchange, add a one-time resize event
    const afterOrientationChange = () => {
      handleResize();
      // Remove the resize event listener after it has executed
      window.removeEventListener('resize', afterOrientationChange);
    };
    window.addEventListener('resize', afterOrientationChange);
  }, [handleResize]);

  useEffect(() => {
    if (typeof ResizeObserver === 'function' && ref && ref.current) {
      let resizeObserver = new ResizeObserver(() => handleResize());
      resizeObserver.observe(ref.current);

      return () => {
        if (!resizeObserver) {
          return;
        }

        resizeObserver.disconnect();
        resizeObserver = null;
      };
    } else {
      window.addEventListener('resize', handleResize);
      window.addEventListener('orientationchange', handleOrientation);

      return () => {
        window.removeEventListener('resize', handleResize);
        window.removeEventListener('orientationchange', handleOrientation);
        cancelAnimationFrame(resizeId);
      };
    }
  }, [callbackFn, handleOrientation, handleResize, ref]);
};

export default useResize;

Вот как вы используете его внутри компонента:

...
const setContentRef = () => {
  console.log('resize');
};

useResize(setContentRef);
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...