React 之 lazy(延迟加载)(十六)

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)}}
    />
  );
}
相关推荐
DoraBigHead10 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu11 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡15 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞17 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu20 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu20 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu21 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge23 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu23 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi28 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端