React lazy loading, debounce

lazy loading

React.Lazyでは、コードを分割できます。 コード分割は、アプリケーションの「遅延ロード」を支援し、ユーザーのパフォーマンスを大幅に向上させます。 アプリケーションのコード量を減らさずに、ユーザーが不要なコードをロードすることを回避し、アプリケーションの初期化ロードに必要なコストを削減します。

App.js

import ImgWrapper from "./components/ImgWrapper";

function App() {
  return (
    <div>
      <ImgWrapper />
    </div>
  );
}

export default App;

ImgWrapper.jsx

import React from "react";
import { images } from "../images";
import ImgItem from "./ImgItem";

const ImgWrapper = () => {
  return (
    <>
      {images.map((image, index) => (
        <ImgItem key={index} src={image.src} />
      ))}
    </>
  );
};

export default ImgWrapper;

ImgItem.jsx

import React, { lazy, Suspense } from "react";

// import Image from "./Img";
const Image = lazy(() => import("./Img"));

const ImgItem = ({ src }) => {
  return (
    <div>
      <Suspense fallback={<div>Loading....</div>}>
        <Image src={src} />
      </Suspense>
    </div>
  );
};

export default ImgItem;

Lazyとして宣言された構成部品は、Suspence構成部品のサブアイテムでレンダリングする必要があります.Suspenseは、fallback propを介して、不活性素子をロードするときのロード画面などの代替コンテンツを表示することができる.1つのSuspence要素を使用して、複数のlazy要素を非表示にすることもできます.
Img.jsx

import React from "react";

export default function Img({ src }) {
  return <img src={src} alt="" />;
}

実行結果はLoading...テキストと画像が順番にロードされます.

debounce

-特定のイベントが発生したときにビジネスロジックが過剰に発生しないようにするための関数です。 -主に、入力ボックスに検索語を入力するたびにサーバから関連検索語情報を取得して表示する機能を実現する。 -最後のイベントが呼び出されてからしばらくの間、呼び出し関数が遅延します。

検索するときは検索語を入力し、後で関連語の出現を体験します.場合このように値を変更するたびにAPIが呼び出されるとしたらどうなりますか?これは、サーバとクライアントにとって大きな負担です.Deboringを使用して、このようなイベントが発生したときにビジネスロジックが過剰に実行されないようにします.