React JS window.requestAnimationFrame(更新)

问题描述

我在 React JS 上使用 Flickity 插件并且一切正常。但是，我想创建像 https://brand.uber.com（同类最佳示例部分）这样的滑块。

https://github.com/metafizzy/flickity/issues/77 上发布的解决方法示例有效，但播放和暂停功能有问题。

问题是 window.requestAnimationFrame(update);在考虑暂停之前重新渲染组件。我已经尝试过使用本地状态和 redux，但它在我可以调度之前重新渲染。我正在使用函数 comp 和下面的代码。

 const carouselIsScrolling = useSelector(isServicesScrolling);
  const servicesCategoriesSel = useSelector(getServiceCategories);
  const carousel = useRef(null);
  const dispatch = usedispatch();

  const update = () => {

    if (carousel.current.flkty.slides && carouselIsScrolling) {
      carousel.current.flkty.x =
        (carousel.current.flkty.x - tickerSpeed) %
        carousel.current.flkty.slideableWidth;
      carousel.current.flkty.selectedindex = carousel.current.flkty.dragEndRestingSelect();
      carousel.current.flkty.updateSelectedSlide();
      carousel.current.flkty.settle(carousel.current.flkty.x);
      window.requestAnimationFrame(update);
    }
  };

  const pause = () => {
    dispatch(app.toggleServiceScroller(false));
    window.cancelAnimationFrame(window.requestAnimationFrame(update));
  };

  const play = () => {
    if (!carouselIsScrolling) {
      dispatch(app.toggleServiceScroller(true));
      window.requestAnimationFrame(update);
    }
  };

  useEffect(() => {
    carousel.current.flkty.on("dragStart",() => {
      dispatch(app.toggleServiceScroller(false));
    });
    dispatch(app.toggleServiceScroller(false));
    update();
  },[]);

解决方法

原因是我正在使用 state 更改 carouselIsScrolling，即等待重新渲染使用，但重新渲染导致它重置为初始值。

我改为使用

const carouselIsScrolling = useRef(true);

和

 if (!carouselIsScrolling.current) return;

现在它可以工作了。