React Suspense 组件的使用案例

以下是一个使用React Suspense组件的使用案例：

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h1>My App</h1>

      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;

上述代码中，MyComponent是一个懒加载组件，它使用了React.lazy来延迟加载。在Suspense组件的包裹下，我们可以指定一个fallback组件，这个组件在懒加载组件加载过程中显示。在上述例子中，我们指定当MyComponent加载时显示一个"Loading..."的文字。

这样做的好处是，当用户访问这个页面时，一开始并不会立即加载MyComponent，而是显示fallback组件，直到MyComponent加载完毕后再渲染。这可以提升页面的性能和响应速度，特别是对于一些比较大的组件或资源的加载。