使用 Effect 是重复的 lottie 动画

Question

在这里学习React，我只是想展示一个lottie动画。看起来相当简单，但我在使用 useEffect 挂钩时遇到了一些麻烦。我正在使用挂钩在页面加载时呈现动画，但它不断重复自身（有时两次或更多次）。我知道这是因为 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

useEffect 方法，当你的组件被挂载时，它会执行内部函数，你的 useEffect 没问题，你的 lottie 配置对象有一个 loop 属性重复你的动画。您应该替换为

lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: false, //or delete this line
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
});

Answer 2

这是因为 React strict mode，它试图帮助您检测不需要的副作用并运行所有 useEffect 钩子两次，所以您可以看到您忘记了什么。在这种情况下，您忘记添加清理功能，没有它 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

Answer 3

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

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

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

return ( ); };

export default Hero;

使用 Effect 是重复的 lottie 动画

use Effect is repeating lottie animation

reactjs

lottie

use-effect