lazy
能够让你在组件第一次被渲染之前延迟加载组件的代码。
在组件外部调用 lazy
,以声明一个懒加载的 React 组件:
javascript
import { lazy } from 'react';
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
配合 Suspense 实现懒加载组件
javascript
//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 (
<div
className="content"
dangerouslySetInnerHTML={{__html: md.render(markdown)}}
/>
);
}