lazy能夠讓你在組件第一次被渲染之前延遲加載組件的代碼。
在組件外部調用 lazy，以聲明一個懶加載的 React 組件:
import { lazy } from 'react';const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));配合?Suspense 實現懶加載組件
//App.js
import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';
//將 lazy 組件聲明在組件外部
const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));export default function MarkdownEditor() {const [showPreview, setShowPreview] = useState(false);const [markdown, setMarkdown] = useState('Hello, **world**!');return (<><textarea value={markdown} onChange={e => setMarkdown(e.target.value)} /><label><input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />Show preview</label><hr />
//MarkdownPreview 的代碼只有在你嘗試渲染它時才會被加載。
//如果 MarkdownPreview 還沒有加載完成，將顯示 Loading。{showPreview && (<Suspense fallback={<Loading />}><h2>Preview</h2><MarkdownPreview markdown={markdown} /></Suspense>)}</>);
}
// 添加一個固定的延遲時間，以便你可以看到加載狀態
function delayForDemo(promise) {return new Promise(resolve => {setTimeout(resolve, 2000);}).then(() => promise);
}//Loading.js
export default function Loading() {return <p><i>Loading...</i></p>;
}//MarkdownPreview.js
import { Remarkable } from 'remarkable';
const md = new Remarkable();
export default function MarkdownPreview({ markdown }) {return (<divclassName="content"dangerouslySetInnerHTML={{__html: md.render(markdown)}}/>);
}
