有没有办法告诉你的反应应用程序页面何时完成加载页面/资产？

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

我尝试在 componentDidMount / componentDidUpdate 中监听窗口加载：

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

这在应用程序首次加载时有效，但在后续加载时无效。

我也尝试过这个：

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

但也是同样的结果。

我尝试在历史记录的前挂钩中添加此警报：

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

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

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

Thanks

正如另一个答案中提到的，您可以使用使用效果 https://reactjs.org/docs/hooks-effect.html当组件挂载到 DOM 中时，会自动调用 hook。但组件挂载到页面上并不意味着页面已完全加载。

在钩子中，我添加了几行代码来检查页面是否完全加载，灵感来自这个答案 https://stackoverflow.com/a/61737215/487334:

  // 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);
    }
  }, []);