lazy loading

InstarCloneに通っている
Lazyは怠け者の意味ですが、プログラミングには異なる意味があります.最小の努力で最大の効率を楽しむという概念で見たほうがいい.
Lazyという言葉は以前、バニラjsのjsnerで遅延評価をどのようにするかを学んだときに聞いたことがあります.
たとえば,1から無限に増加する無限関数がある.このとき,先に述べた5の倍数を2個だけ抽出すると[5,10]となる.
無限に増加した関数は1から10の数字しか生成されず、停止します.このように,必要に応じて作成し,必要に応じて送信することは,遅延評価といえる.ちなみに5代目の倍数を使ったコードは以下の通りです

// 제너레이터는 function키워드 뒤에 *가 붙고, yield라는 키워드를 이용해 값을 저장한다.
function* GenerateNum(num) {
  let i = 1;
  while (i < n) {
    yield i++;
  }
}

function fiveArr(iter) {
  const res = [];
  for (const item of iter) {
    if (item % 5 === 0) {
      res.push(item);
    } else if (res.length === 2) {
      break;
    }
  }

  return res;
}

fiveArr(GenerateNum(100)); // [5,10]

この場合,GenerationNumにどれだけの数を加えても所要時間は同じである.GenerateNumは、fiveArがiterリクエスト値を通過した場合にのみ返されるためです.
事前に100個の要素を作って、待たないでください.
Wikipediaでは、次のような遅延評価が定義されています.
結果値を計算する方法が必要になるまで計算を遅延します.
では、反応器のlazyはどんな概念として使われるのでしょうか.
コンポーネントを事前に読み込み、ビームに追加する従来の方法とは異なり、レンダリング時にのみ読み込まれ、ビームに追加されます.
これにより、non-sential codeをツリー型に振動させ、バンドルファイルを減らすことができます.束ファイルが減少すると、ロード速度が速くなり、UXが改善されます.
すなわち、コアは필요할 때만 가져온다である.React.lazyは動的導入技術を採用している.また、lazyのimport素子がレンダリングされる場合にのみ、ビームに含まれます.
コードを見て

import React from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

この場合、Other ComponentはPromiseオブジェクトを返し、使用時にOther Componentとして解析されます.
遅延負荷要素は、Suspense要素内で使用することができる.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );

このまま.このとき、Suspenseのfallback propは、不活性ロード時に短いギャップを生じ、ロード画面のように解放できる素子を出力する.
これにより、パフォーマンスの最適化方法が再び習得されました.
https://reactjs.org/docs/code-splitting.html#reactlazyを参照