使用 React 钩子初始化第三方库

Question

我想在使用 React 挂钩安装某个组件时初始化一个Swiper实例。 在调整大小时，我想根据视口宽度销毁或更新 Swiper 实例。

我正在使用useEffect挂钩初始化插件，我在其中调用存储为const的 function 。

const MyComponent = () => {
  const [swiper, setSwiper] = useSate(null);
  const element = useRef(null);

  const initSwiper = useCallback(() => {
    // swiper is always null here so I can't destroy the instance
    if (MediaQuery.is('large up') && swiper !== null) {
      return setSwiper(swiper.destroy());
    }

    if (MediaQuery.is('small up')) {
      const currentSwiper = new Swiper(element.current, swiperSettings);
      currentSwiper.init();

      return setSwiper(currentSwiper);
    }
  }, [swiper, swiperSettings]);

  useEffect(() => {
    initSwiper();
    window.addEventListener('resize', initSwiper);

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

  return (
    <div ref={element}>...</div>
}

我想知道初始化后如何访问 Swiper 实例。 我应该使用ref吗？ 我不确定处理这个问题的最佳方法是什么。

Answer 1

您实际上并不需要 state 。 由于useEffect()回调是一个闭包，并且您不会在闭包之外使用swiper ，因此请创建一个变量 ( let swiper )，并将Swiper的当前实例分配给该变量。 您还应该在闭包内声明initSwiper ，并且您不需要（实际上也不能）用useEffect()包装它，因为useEffect()块仅在 init 上运行。

注意： swiperSettings不是来自道具或 state，因此useEffect()块不依赖于它们。 如果您需要通过props更改它，请通过 ref 传递它们。

const MyComponent = () => {
  const element = useRef(null);

  useEffect(() => {
    let swiper = null;

    const initSwiper = () => {
      if (MediaQuery.is('large up') && swiper !== null) {
        swiper = swiper.destroy();
      } else if (MediaQuery.is('small up')) {
        // swiper.destroy(); // should probably start by destroying the old swiper
        swiper = new Swiper(element.current, swiperSettings);
        swiper.init();
      }
    };

    window.addEventListener('resize', initSwiper);

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

  return (
    <div ref={element}>...</div>
  );
};

并用作自定义钩子（如@PatrickRoberts 建议的那样）：

const useSwiper = () => {
  const element = useRef(null);

  useEffect(() => {
    let swiper = null;

    const initSwiper = () => {
      if (MediaQuery.is('large up') && swiper !== null) {
        swiper = swiper.destroy();
      } else if (MediaQuery.is('small up')) {
        // swiper.destroy(); // should probably start by destroying the old swiper
        swiper = new Swiper(element.current, swiperSettings);
        swiper.init();
      }
    };

    window.addEventListener('resize', initSwiper);

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

  return element;
};

const MyComponent = () => (
  <div ref={useSwiper()} />
);