reactjs - 使用效果是重复lottie动画

Question

在这里学习React，我只是想显示一个lottie动画。看起来相当简单，但我在使用 useEffect Hook 时遇到了一些问题。我使用钩子(Hook)在页面加载时渲染动画，但它不断重复(有时两次或更多次)。我知道这是因为 useEffect 会多次触发，但我不知道如何处理这个问题。我只想在页面上显示一个动画。我怎样才能实现这个目标？

import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";

const Hero = () => {
  const lottieContainer = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
    });
  }, []);


  return (
    <div className="hero">
      <div ref={lottieContainer}></div>
    </div>
  );
};

export default Hero;

Answer 1

这是因为 React strict mode ，它会尝试帮助您检测不需要的副作用并运行所有 useEffect Hook 两次，以便您可以看到您忘记了某些内容。在这种情况下，您忘记添加清理功能，没有它，lottie 会创建 2 个动画而不清理第一个动画。只需将其添加到您的代码中即可:

  useEffect(() => {
    const instance = lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: require('../../../assets/Lottie/developer.json')
    });

    // Return clean up function here
    return () => instance.destroy();
  }, []);

Codesandbox