javascript - 有没有办法告诉你的 react 应用程序页面何时完成加载页面/ Assets ？

Question

我的 React 应用程序中有一个脚本，我想在页面完全加载完成后运行该脚本。

我试过在 componentDidMount/componentDidUpdate 中像这样监听窗口加载:

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    // do stuff
  }
}

这会在应用首次加载时起作用，但不会在后续加载时起作用。

我也试过这个:

window.onload = function () { alert("It's loaded!") }

但也是一样的结果。

我已经尝试在历史记录的 before Hook 中添加此警报:

browserHistory.listen((location) => { 
  window.onload = function () { alert("It's loaded!") }
}

这仅在我导航后才有效。browserHistory 是否有一个 after hook 会在页面加载后运行？

最重要的是，我想知道页面何时在路由更改和刷新时加载到 React 应用程序中，以便我可以执行脚本。

谢谢

Answer 1

如另一个答案中所述，您可以使用 useEffect当组件挂载到 DOM 中时自动调用的钩子(Hook)。但是组件挂载到页面上并不代表页面加载完全。

在钩子(Hook)中，我添加了几行代码来检查页面是否完全加载，灵感来自 this answer :

  // This will run one time after the component mounts
  useEffect(() => {
    // callback function to call when event triggers
    const onPageLoad = () => {
      console.log('page loaded');
      // do something else
    };

    // Check if the page has already loaded
    if (document.readyState === 'complete') {
      onPageLoad();
    } else {
      window.addEventListener('load', onPageLoad, false);
      // Remove the event listener when component unmounts
      return () => window.removeEventListener('load', onPageLoad);
    }
  }, []);