window.addEventListener('load', function) 在 react(gatsby) 中不起作用答案

【问题标题】：window.addEventListener('load', function) not working in react(gatsby)window.addEventListener('load', function) 在 react(gatsby) 中不起作用
【发布时间】：2020-04-14 12:37:43
【问题描述】：

当页面初始滚动不在加载顶部时，我正在努力解决滚动视差问题。我正在使用 react-scroll-parallax 库 (https://www.npmjs.com/package/react-scroll-parallax)。为了解决我的问题，我正在尝试使用他们从这里https://www.npmjs.com/package/react-scroll-parallax#example-usage-of-context 提出的建议。

import { useEffect } from 'react';
import { useController } from 'react-scroll-parallax';

const ParallaxCache = () => {
  const { parallaxController } = useController();
  useEffect(() => {
    const handler = () => {
      parallaxController.update();
      console.log(1);
    };
    window.addEventListener('load', handler);
    return () => document.removeEventListener('load', handler);
  }, [parallaxController]);

  return null;
};

export default ParallaxCache;

我将 ParallaxCache 组件放在我的应用程序顶部（实际上是页面，导致它的 gatsby）。

但“加载”事件似乎不起作用。我也尝试过“DOMContentLoaded”，但结果相同。但是，其他事件（例如“滚动”或“调整大小”）可以正常工作，并且我的控制器会更新。我是否遗漏了什么或反应阻止使用此事件？

【问题讨论】：

标签： javascript reactjs gatsby parallax

【解决方案1】：

如果只是 load 事件不起作用，则可能是在运行此代码时页面已经加载。尝试添加 if 语句来检查文档是否已经加载。

import { useEffect } from 'react';
import { useController } from 'react-scroll-parallax';

const ParallaxCache = () => {
  const { parallaxController } = useController();
  useEffect(() => {
    const handler = () => {
      parallaxController.update();
      console.log(1);
    };

    if (document.readyState === "complete") {
      handler();
    } else {
      window.addEventListener('load', handler);
      return () => document.removeEventListener('load', handler);
    }
  }, [parallaxController]);

  return null;
};

export default ParallaxCache;

【讨论】：

【解决方案2】：

很有可能您的窗口在您的组件被实例化时已经触发了 load 事件。

【讨论】：

【解决方案3】：

useEffect 钩子在这种情况下不合适，所以你必须使用 useLayoutEffect 钩子。请检查此参考。 https://www.npmjs.com/package/react-scroll-parallax#example-usage-of-context 你使用了 useEffect 钩子但是在这个例子中，他们使用了 useLayoutEffect 钩子。请参考这个参考。 https://kentcdodds.com/blog/useeffect-vs-uselayouteffect

const ParallaxCache = () => {
    const { parallaxController } = useController();

    useLayoutEffect(() => {
        const handler = () => parallaxController.update();
        window.addEventListener('load', handler);
        return () => window.removeEventListener('load', handler);
    }, [parallaxController]);

    return null;
};

【讨论】：

感谢您的回复，该功能现在可以使用，但仍然无法解决我的视差卡住问题。似乎 update() 不起作用。有什么想法吗？

【解决方案4】：

if (document.readyState === "complete") {
  handler();
} else {
  window.addEventListener('load', handler);
  return () => document.removeEventListener('load', handler);
}

由于脚本未完全加载，这将导致间歇性问题。

【讨论】：

【解决方案5】：

如果您使用基于类的组件（如 componentDidMount 方法），我认为您应该使用其中一种生命周期方法。

componentDidMount() {
   window.addEventListener('resize', this.handleResize)
}

【讨论】：