ScrollTrigger-呈现大量组件

Question

我创建了一个登陆页面,当用户滚动这个站点时,我使用scrollTrigger（gsap）来显示元素.但我看到我的网站有时崩溃，工作非常慢。此外，当用户滚动到该节和布局时，节呈现的所有时间之一将崩溃。我认识到这个问题的想法很简单。在我的包装中，我有一段代码，如下所示：

function Wrapper) {
  const [about, setAbout] = useState(false)


  useEffect(() => {

    gsap.registerPlugin(ScrollTrigger);

    gsap.to('section', {
      scrollTrigger: {
        trigger: '.about',
        once: true,
        start: 'top 20%',
        onEnter: () => {
          setAbout(true)
        }
      }
    })

  })

  return (
    <div className="App">
      <div className="row">
        <About about={about} />

      </div>
    </div>
  );
}

大概是这样的

function About(props){
    useEffect(() => {
        if (props.about === true) {
           //my adnimation code
        }

    }, [props.about])
    return(
        <section className="about" >
            {console.log('about')}
            <p>Someting</p>
        </section>
    );
}

请看我将console.log使用到return（）中。此控制台在访问我的网站期间一直显示。所有的时间，如果用户滚动网站到about部分，然后滚动到顶部（在这种情况下，它记录了一打或几十打）。我做错了什么？

Answer 1

你能为它创建一个沙箱吗？我认为用useRef替换Ustate可能会有帮助。

const about = useRef(false)
about.current = true