React，useEffect 清理不适用于 removeEventListener，useRef，视差效果

Question

我正在尝试通过使用 useRef() 抓取 bubblesRef 和 translateY() onScroll.

对 .svg 图像应用视差效果

视差有效，但当我导航到下一页时，我收到错误“TypeError: Cannot read property 'style' of null”。我认为这是因为 addEventListener 在导航到下一页时仍在监听并尝试 bubblesRef 上的 useRef()。所以我在 useEffect() 中添加了清理功能，但这似乎并没有解决它。

感谢任何帮助。谢谢！

p.s。如果任何人都可以分享他们的方法来实现像这样的简单视差效果，那也太好了。这是我认为不会重新呈现页面上其他所有内容的唯一方法 onScroll.

const HomePage = () => {
  const [loadedPosts, setLoadedPosts] = useState([]);
  const { sendRequest } = useHttpClient();
  console.log("loadedPosts homePage", loadedPosts);
  const bubblesRef = useRef();

  useEffect(() => {
    if (loadedPosts.length === 0) {
      //api call
    }
  }, [sendRequest, loadedPosts]);

  useEffect(() => {
    const parallax = () => {
      let scrolledValue = window.scrollY / 3.5;
      bubblesRef.current.style.transform = `translateY(
      -${scrolledValue + "px"} 
      )`;
      console.log("scrolling...", scrolledValue);
    };
    window.addEventListener("scroll", parallax);
    return () => window.removeEventListener("scroll", parallax);
  }, []);

  return (

      <HomePageContainer>
        <Header />
        <SectionOne posts={loadedPosts} />
        <SectionTwo />
         <BubbleBlobs className="bubbleBlobs" ref={bubblesRef} />
        <BlobTop className="backBlobBottom" preserveAspectRatio="none" />
      </HomePageContainer>
   );
};

export default HomePage;

Answer 1

当你调用useEffect时，你的引用还没有被实例化，所以出现错误信息，在你的useEffect依赖数组中，插入你的引用，在运行之前的代码中useEffect，确保您当前的引用已定义。

Answer 2

每当您向 window 添加侦听器时，您肯定需要清理功能，否则处理程序（以及组件实例本身）将永远存在。然而，由于 React 异步运行这些清理挂钩，它可能直到其他 window 事件之后才会发生。 ref 的值在组件卸载时设置为 null，因此您需要在使用该值之前检查它是否仍然被定义。

useEffect(() => {
  const handler = () => {
    if (ref.current) {
      // perform update
    }
  }

  window.addEventListener('scroll', handler)
  return () => window.removeEventListener('scroll', handler)
}, [])

React，useEffect 清理不适用于 removeEventListener，useRef，视差效果

React, useEffect cleanup not working with removeEventListener, useRef, parallax effect

javascript

addeventlistener

parallax

reactjs

use-effect