TypeScript react.useLayoutEffect函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中react.useLayoutEffect函数的典型用法代码示例。如果您正苦于以下问题：TypeScript useLayoutEffect函数的具体用法？TypeScript useLayoutEffect怎么用？TypeScript useLayoutEffect使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了useLayoutEffect函数的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: useComponentSize

export function useComponentSize(ref: React.RefObject<HTMLElement>) {
  let [componentSize, setComponentSize] = useState(getSize(ref.current));

  const handleResize = useCallback(
    function handleResize() {
      if (ref.current) {
        setComponentSize(getSize(ref.current));
      }
    },
    [ref]
  );

  useLayoutEffect(() => {
    if (!ref.current) {
      return;
    }

    if (SUPPORTS_RESIZE_OBSERVER) {
      let resizeObserver = new ResizeObserver(() => handleResize());
      resizeObserver.observe(ref.current);

      return () => {
        resizeObserver.disconnect();
      };
    } else {
      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }
  }, [handleResize, ref]);

  return componentSize;
}

开发者ID:LWJGL，项目名称:lwjgl3-www，代码行数:35，代码来源:useComponentSize.ts

示例2: useUnmount

export function useUnmount() {
  const unmounted = useRef(true)

  useLayoutEffect(() => {
    unmounted.current = false
    return () => {
      unmounted.current = true
    }
  }, [])

  return unmounted
}

开发者ID:8th713，项目名称:cockpit-for-pixiv，代码行数:12，代码来源:useUnmount.ts

示例3: useOnScreen

export function useOnScreen(ref: React.RefObject<Element>, options?: IntersectionObserverInit) {
  const [isIntersecting, setIntersecting] = useState(false);

  useLayoutEffect(() => {
    if (ref.current) {
      const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), options);
      observer.observe(ref.current);
      return () => {
        observer.disconnect();
      };
    }
  }, [ref, options]);

  return isIntersecting;
}

开发者ID:LWJGL，项目名称:lwjgl3-www，代码行数:15，代码来源:useOnScreen.ts

示例4: useResizeObserver

export function useResizeObserver(target: React.RefObject<HTMLElement>) {
  const [rect, setRect] = useState(getZeroRect);
  const observer: React.MutableRefObject<ResizeObserver | null> = useRef(null);

  useLayoutEffect(() => {
    function handleResize(entries: Array<ResizeObserverEntry>) {
      setRect(entries[0].contentRect);
    }

    observer.current = new ResizeObserver(handleResize);
    if (target.current !== null) {
      observer.current.observe(target.current);
    }

    return () => {
      if (observer.current !== null) {
        observer.current.disconnect();
        observer.current = null;
      }
    };
  }, []);

  return rect;
}

开发者ID:LWJGL，项目名称:lwjgl3-www，代码行数:24，代码来源:useResizeObserver.ts

示例5: usePlayer

export function usePlayer(
  ref: React.RefObject<HTMLCanvasElement>,
  frames: Frame[]
) {
  const timerRef = useRef(0)
  const [index, setIndex] = useState(0)
  const [paused, setPaused] = useState(false)

  function draw(image: HTMLImageElement) {
    if (!image || !ref.current) return

    const canvas = ref.current

    if (canvas.width !== image.width) {
      canvas.width = image.width
    }
    if (canvas.height !== image.height) {
      canvas.height = image.height
    }

    const ctx = canvas.getContext('2d')!

    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(image, 0, 0)
  }
  function next() {
    const lastFrame = frames.length - 1

    if (index === lastFrame) {
      setIndex(0)
    } else {
      setIndex(index + 1)
    }
  }
  function toggle() {
    if (paused) {
      setPaused(false)
      next()
    } else {
      window.clearTimeout(timerRef.current)
      setPaused(true)
    }
  }
  function rewind() {
    window.clearTimeout(timerRef.current)
    setPaused(true)
    setIndex(0)
  }

  useLayoutEffect(() => {
    const { delay, image } = frames[index]

    draw(image)

    if (!paused) {
      timerRef.current = window.setTimeout(next, delay)
    }
    return () => {
      window.clearTimeout(timerRef.current)
    }
  }, [index])

  return { index, paused, toggle, rewind }
}

开发者ID:8th713，项目名称:cockpit-for-pixiv，代码行数:64，代码来源:usePlayer.ts

注：本文中的react.useLayoutEffect函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。