React/gatsby Lottie 动画瓶颈 DOM

Question

我对 React/Gatsby 中的 Lottie 动画有一个奇怪的问题。我试过很多插件，比如 react-lottie、lottie-react、lottie-web 等。它们都在来回导航页面时开始成为 dom 的瓶颈。

我已经针对这个问题做了一个例子：https://elegant-aryabhata-490c95.netlify.app/ 如果您在页面之间导航 转到第 2 页 和 返回主页 足够快 DOM 停止并且动画开始渲染还有额外的东西。

我正在渲染动画：

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Lottie from "lottie-react"
import contactAnimation from "../components/assets/contact.json"

const SecondPage = () => (
  <Layout>
    <SEO title="Page two" />
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <Link to="/">Go back to the homepage</Link>
    <Lottie animationData={contactAnimation} style={{ width: "600px" }} />
  </Layout>
)

export default SecondPage

看起来像是内存泄漏之类的，但不知道如何调试。

Answer 1

好吧，我自己整理了一下，原来是内存泄漏，如果某些 Lottie 动画我们使用 'repeater'

通过字符串化 JSON 解决了它：const contactAnimation = JSON.parse(JSON.stringify(data))

因此完整代码变为：

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Lottie from "lottie-react"
import data from "../components/assets/contact.json"

const SecondPage = () => {
  const contactAnimation = JSON.parse(JSON.stringify(data))
  return (
    <Layout>
      <SEO title="Page two" />
      <h1>Hi from the second page</h1>
      <p>Welcome to page 2</p>
      <Link to="/">Go back to the homepage</Link>
      <Lottie animationData={contactAnimation} style={{ width: "600px" }} />
    </Layout>
  )
}

export default SecondPage

React/gatsby Lottie 动画瓶颈 DOM

React/gatsby with Lottie animation bottlenecks the DOM

reactjs

lottie