Lazy 懒加载容器

基本使用

适用于滚动到可视化区域才渲染组件的场景

tsx

import { Lazy } from "@lite-code/shared";
import { useEffect } from "react";

const SomeAlert = () => {
  useEffect(() => {
    alert("加载组件 SomeAlert");
  }, []);
  return <a>组件 SomeAlert</a>;
};

export default () => (
  <div style={{ height: 500, overflow: "auto" }}>
    <div
      style={{
        height: "100vh",
        background: "var(--vp-c-bg-alt)",
        padding: 10,
        margin: 10,
      }}
    >
      首屏内容...
    </div>
    {/* 这个组件只有在滚动到可见区域时才会被渲染 */}
    <Lazy>
      <SomeAlert />
    </Lazy>
  </div>
);