javascript - 在 React Hook 中调整大小时回调未触发

Question

我让控制台日志在每次调整大小时在挂钩内触发，但是在回调中传递给调整大小挂钩的控制台日志永远不会触发。

这是我拥有的钩子，它根据详尽的 deps eslint 插件使用 useCallbacks：

// @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);
...

标签： javascriptreactjscallbackresizereact-hooks