有没有办法判断您的 React 应用程序页面何时完成加载页面/资产？

Question

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

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

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

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

我也试过这个：

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

但也是同样的结果。

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

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

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

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

谢谢

Answer 1

正如另一个答案中提到的，您可以使用useEffect钩子，当组件安装在 DOM 中时，该钩子会自动调用。但组件挂载到页面上并不意味着页面已完全加载。

在钩子中，我添加了几行代码来检查页面是否完全加载，受到这个答案的启发：

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

Answer 2

你可以使用 React 的类组件生命周期方法componentDidMount()（更多信息在这里）。

或者，您可以在功能组件中使用useEffect()钩子，如下所示：

 useEffect(() => console.log('mounted'), []);

useEffect() 中的代码将在组件安装后运行。