你的React应用程序页面何时加载完毕/资源何时加载完毕有办法判断吗？

Question

我有一个脚本在我的React应用中，我希望它在页面完全加载完成后运行。

我已经尝试在componentDidMount / componentDidUpdate中监听window的加载，像这样：

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是否有一个在页面加载后运行的后钩子函数？

总之，我想知道在React应用程序中路由更改和刷新时页面何时加载，以便执行脚本。

谢谢

- zero_cool

---

ReactDOM.render(<MyElement />, document.getElementById('root'), () => { console.log('page is loaded'); }) 这个函数会在页面加载完成后运行。 - daddygames

这种方法是有效的，但仅在刷新页面或通过URL访问时触发。如何在导航到页面后记录到console.log，并在页面加载后记录呢？ - zero_cool

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

- Dayron Gallardo

---

这对于尝试弄清楚在刷新页面时 useEffect 的运行方式与仅仅是组件挂载非常有帮助。 - Xenology

Answer 2

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

或者，您可以在函数式组件中使用useEffect() hook，像这样：

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

useEffect() 中的代码会在组件挂载后运行。

- Yuliya Plotka

---

该组件可以被安装，即使页面仍在加载中... - Juanma Menendez