React内置组件 <Suspense> 允许在子组件完成加载前展示后备内容。
和Vue的<Suspense>相似。
使用 React.lazy 和 <Suspense> 的代码示例:
// MyComponent.js  
const MyComponent = () => {  // ... 你的组件代码 ...  return <div>Hello from MyComponent!</div>;  
};  export default MyComponent;
// LazyMyComponent.js  
const LazyMyComponent = React.lazy(() => import('./MyComponent'));  export default LazyMyComponent;
// App.js  
import React, { Suspense } from 'react';  
import LazyMyComponent from './LazyMyComponent';  function App() {  return (  <div className="App">  <h1>Hello from App!</h1>  <Suspense fallback={<div>Loading...</div>}>  //或 <Suspense fallback={<Loading />}>  //<Loading />为组件<LazyMyComponent />  </Suspense>  </div>  );  
}  
export default App;function Loading() {return <h2>🌀 Loading...</h2>;
}
当 MyComponent 组件的数据还在加载时,用户将看到一个显示 “Loading…” 的后备内容。
 一旦 MyComponent 准备就绪,后备内容将被替换为实际的组件内容。