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

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 挂钩？

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

谢谢

score 7 · Accepted Answer

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

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

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

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

1 回答 1