react页面加载完

在React中，当页面加载完毕时，你可以使用`componentDidMount`生命周期方法来执行相应的逻辑。`componentDidMount`会在组件渲染后立即调用，所以它是处理页面加载完成事件的一个很好的地方。

例如，你可以在`componentDidMount`中发送网络请求、初始化一些数据、订阅一些事件等。下面是一个示例：

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 页面加载完毕后执行的逻辑
    console.log('页面加载完毕');
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

在上面的示例中，`componentDidMount`方法被调用时，会在控制台输出"页面加载完毕"。你可以根据需要在该方法中添加你自己的逻辑。

相关问题

react懒加载的好处

React懒加载是一种代码优化方式，它可以帮助你减少应用程序的初始加载时间。它的工作原理是将组件的加载推迟到组件首次渲染时，而不是在应用程序初始加载时。这意味着，当用户访问应用程序时，只有当前页面需要的组件会被加载，其余的组件将在需要时动态地加载。

React懒加载的好处包括：
1. 减少初始加载时间：React懒加载可以减少应用程序的初始加载时间，因为只有当前页面需要的组件会被加载。
2. 提高性能：由于React懒加载可以减少不必要的组件加载，因此可以提高应用程序的性能。
3. 优化用户体验：React懒加载可以使用户更快地访问应用程序，从而提高用户体验。
4. 减少资源浪费：由于React懒加载只会在需要时动态地加载组件，因此可以减少资源的浪费。

react 组件懒加载

React 组件懒加载是一种优化技术，它可以让页面在加载时只加载首屏需要的组件，而其它组件则在需要时再进行加载。这样可以减少首屏加载时间，提高页面性能和用户体验。

React 官方提供了 `React.lazy()` 方法进行组件懒加载。使用方法如下：

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

这里通过 `React.lazy()` 方法懒加载 `MyComponent` 组件，当组件需要被渲染时，React 会自动加载该组件。同时，为了避免组件加载时间过长导致页面空白，我们使用 `Suspense` 组件设置了一个加载中的提示。