React 之 ＜Suspense＞（十三）

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 准备就绪，后备内容将被替换为实际的组件内容。