2022年のトップ5反応遅延負荷ライブラリ

34985 ワード
react productivity webdev javascript テキストリンク
怠惰な負荷は、反応アプリケーションを最適化する最も人気のある方法の一つです.それは、ユーザーが彼らがそれを必要とするときだけ、コンテンツをレンダリングするのを許します.
長年にわたり,種々のパッケージを反応生態系に導入し,遅延負荷による最適化を行った.この記事は、以下の5つの怠惰な読み込みライブラリを経由します.
  • react-lazyload
  • react-lazy-load
  • react-lazy-load-image-component
  • react-lazy-images
  • react-lazy-blur-image

    • Lazyload :柔軟なカスタマイズ
    react-lazyload 怠惰な負荷のコンポーネントの任意の種類の反応アプリケーションで使用することができます.これは、反応コミュニティで最も人気のある怠惰な読み込みライブラリの一つです.
    反応LazyLoadは約892万毎月のNPMのダウンロードと5.4000 github星を持っています.

    反応Lazyloadの特徴
  • ユーザーがコンポーネントの機能をカスタマイズできるようにする一連のプロパティがあります.
  • ForceCheckなどのユーティリティを使用して、リサイズまたはスクロールイベントなしで表示される隠しコンテンツを表示します.
  • サポート水平方向の怠惰な負荷ボックスから.
  • パフォーマンスを最適化する、すべてのlazaly負荷されたコンポーネントの2つのイベントリスナーのみを実装します.

    • インストール
    NPMを使ってライブラリをインストールして保存することができます.
    注意- NPMのインストール-保存反応

    用途
    インストール後、次のように反応LazyLoadを使用することができます.
    import React from 'react';
import LazyLoad from 'react-lazyload';
import LazyComponent from './LazyComponent'; //Component to be lazyloaded.
import Placeholder from './Placeholder'; //Placeholder component.

const App = () => {
  return (
    <div className="container">
      /\\\* Lazy loading images is supported by default without extra configurations,
         set height for better experience \\\*/
      <LazyLoad height={200}>
        <img src={"https://picsum.photos/id/235/500/500"} /> 
      </LazyLoad>

      /\\\* Once this component is loaded, LazyLoad will not care about it anymore,
      improving performance \\\*/
      <LazyLoad height={200} once>
        <img src={"https://picsum.photos/id/235/500/500"} /> 
      </LazyLoad>

      /\\\*Can also load components as below\\\*/
      <LazyLoad height={200} once >
         <LazyComponent />
      </LazyLoad>

       /\\\* This component will be loaded when its top edge is 100px from viewport. 
       Offset prop is useful to make user ignorant about lazy load effect. \\\*/
      <LazyLoad height={200} offset={100}>
        <img src={"https://picsum.photos/id/235/500/500"} /> 
      </LazyLoad>

      /\\\*Can use a placeholder component as bellow\\\*/
      <LazyLoad placeholder={<Placeholder/>}>
          <img src={"https://picsum.photos/id/235/500/500"} /> 
      </LazyLoad>

    </div>
  );
};

export default App;
    注:そのよく書かれたチェックアウトdocumentation 反応LazyLoadとその制限についての詳細をご覧ください.

    怠惰な負荷:信じられないほど高速!
    react-lazy-load は、予測可能な方法でコンテンツを読み込みを延期するために使用できる反応コンポーネントです.これは比較的高速で、最小のバンドルサイズ(6 KBミニ化)です.
    反応怠惰な負荷は676千毎月のNPMのダウンロードと869 github星があります.

    反応遅延負荷の特徴
  • スクロールバーを使用してスクロールコンテナを自動的に検出し、スクロールコンテナ内でも使用できます.
  • ユーザーは、ビューポートの任意の側からコンテンツの読み込みを開始するための閾値を設定し、offsetVertical、offsettop、offsetbottomなどのような小道具を使用します.
  • IE 8 +で動作します.
  • は、組み込みの機能をサポートしています.
    • しかし、反応LazyLoadライブラリと比較して、この構成要素は小道具の非常に限られた数を持って、したがって、より少ない柔軟性を提供します.主な欠点は、ユーザーが怠惰なロードされたコンポーネントのプレースホルダを適用できないことです.

    インストール
    ライブラリをインストールすることができますし、次のコマンドを使用して、反応アプリケーションに保存されます.
    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    用途
    ここでは、あなたが反応怠惰な負荷を使用してコンポーネントを読み込むことができる方法です.
    import React from 'react';
import LazyLoad from 'react-lazy-load';

const App = () => {
  <div className='App'>
    <div className="container">
      /\\\*With default offset 0, and height set for more clarity\\\*/
      <LazyLoad height={500}>
        <img src={"https://picsum.photos/id/235/500/500"} alt='demonstration1' />
      </LazyLoad>  

      /\\\*OffsetBottom allows you to start loading content before reaching the viewport\\\*/
      <LazyLoad offsetBottom={200}>
         <img src={"https://picsum.photos/id/235/500/500"} alt='demonstration2'/>
      </LazyLoad> 

      /\\\*OffsetTop allows you to delay content loading after reaching the viewport\\\*/
      <LazyLoad offsetTop={200}>
         <img src={"https://picsum.photos/id/235/500/500"} alt='demonstration3'/>
      </LazyLoad> 
     </div>
  </div>
}

export default App;
    注:反応怠惰な負荷をチェックアウトdocumentation コンポーネントの詳細については.

    Lazy Load Image Components : TypeScript宣言との互換性
    The react-lazy-load-image-component コンポーネントの任意の種類の怠惰な読み込みのための使いやすいライブラリです.サポートしていますIntersectionObserver , そして、要素が去って、viewportに入るとき、あなたは決定することができます.
    反応怠惰な負荷の画像コンポーネントは、324万毎月のNPMのダウンロードと884ギタブ星を持っています.

    反応遅延負荷画像成分の特徴
  • このライブラリの最も重要な特徴は、Host、TrackWindowScrollです.コンポーネントは、すべての要素に対してスクロールまたはリサイズイベントリスナーを使用せずに、ウィンドウのスクロール位置を追跡できます.
  • 怠惰にロードされたコンポーネントは、デフォルトで100ピクセルのオフセットを持ちます.
  • ビルトイン、ぼやけ、黒と白のような目に見える影響で、不透明な移行は、ユーザーエクスペリエンスを向上させるのに役立ちます.
  • 互換性のあるサーバー側レンダリング.
  • typescript宣言のサポート.
  • プレースホルダは、デフォルトで画像やコンポーネントと同じサイズで提供されますが、カスタマイズできます.

    • インストール
    次のコマンドを使用してパッケージをインストールして保存できます.
    経糸
    $糸追加反応怠惰なロードイメージ構成要素
    \n\npm
    $ npm install --保存しているLazy Load Imageコンポーネントを保存する
    畝

    用途
    lazoyloadimageコンポーネントの簡単な使用例を示した.
    import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import Placeholder from './Placeholder'; //Placeholder component.
//Import the css file if using blur, black and white, or opacity effects. 
import 'react-lazy-load-image-component/src/effects/blur.css';

const App = () => {
  <div className='App'>
    <div className="container">
      /\\\\\\\\\\\\\\\*Can use a placeholder for the component\\\\\\\\\\\\\\\*/
       <LazyLoadImage
              alt="demonstration1"
              placeholder={<Placeholder/>}
              width = {100}
              height = {100}
              src={"https://picsum.photos/id/235/500/500"}
        />

       /\\\*Using the opacity effect\\\*/
       <LazyLoadImage
              alt="demonstration2"
              effect="opacity"
              src={"https://picsum.photos/id/235/500/500"}
        />
     </div>
  </div>
}

export default App;
    注意:いくつかの実装例とその制限documentation 図書館の.

    4 .反応怠惰な画像:SEOまたはJS障害環境に対するフォールバック戦略
    react-lazy-images コンポーネントとユーティリティを怠惰な負荷イメージに対応させる柔軟なライブラリです.それはレンダリング小道具を使用して発信者のための完全なプレゼンティングコントロールを提供します.
    反応怠惰な画像は約51000毎月のNPMのダウンロードと263 Gitthub星があります.

    反応怠惰な画像の特徴
  • パフォーマンスを向上させるためにポリフィルとintersectionObserverを使用します.
  • SEO -およびJavaScript無効の環境のためのフォールバック戦略を提供します.
  • サポートサーバーサイドレンダリング.
  • 背景画像をサポートし、水平スクロールで動作します.

    • インストール
    ライブラリパッケージはNPM経由で配布され、次のようにインストールできます.
    経糸
    $糸追加反応怠惰なイメージ
    \n\npm
    $ NPMのインストール-保存反応怠惰なイメージ

    用途
    次の例では、コンポーネントの基本機能をReplyで実装する方法を示します.
    import React from 'react';
import { LazyImage } from "react-lazy-images";

const App = () => {
  <div className='App'>
    <div className="container">
      /\\\*Basic implementation.
      It is important that you pass on the ref in placeholder, 
      otherwise the detection of the element intersecting is impossible.
      \\\*/
        <LazyImage
        src={"https://picsum.photos/id/235/500/500"}
        alt={"demonstration"}
        debounceDurationMs={800}
        placeholder={({ imageProps, ref }) => (
          <img
            ref={ref}
            src={"https://picsum.photos/id/235/500/500?blur=10"}
            alt={imageProps.alt}
            style={{ width: "100%" }}
          />
        )}
        actual={({ imageProps }) => (
          <img {...imageProps} style={{ width: "100%" }} />
        )}
      />

     </div>
  </div>
}

export default App;
    柔軟なコンポーネントであることに加えて、怠惰なイメージは、ソースコードとdocumentation , 可能な問題とその解決策を持つ深さの実装詳細を説明する.

    怠惰なぼかしイメージを反応させる:軽量灰色プレースホルダを提供する
    react-lazy-blur-image 低解像度プレースホルダに怠惰な負荷画像に理想的なライブラリです.既定では、このコンポーネントは、軽量で灰色のプレースホルダを表示し、コンポーネントがビューポートに到達するときに実際のプレースホルダに置き換えられます.このプレースホルダは実際の画像が完全に緩慢にロードされた場合にだけ置き換えられます.
    反応怠惰なぼかし画像は約1000毎月のNPMのダウンロードがあります.

    反応怠惰ぼけ画像の特徴
  • それは怠惰な負荷イメージに最小のアプローチを提供します.そして、完全なUXとパフォーマンスバランスを提供します.
  • このコンポーネントは、カスタマイズ用の2つの小道具を使用します.
  • コンポーネントは、スタイルコンポーネントを使用してプレースホルダからイメージを移行できます.

    • インストール
    次のコマンドを使用してパッケージをインストールして保存できます.
    経糸
    $糸追加反応怠惰なぼかしイメージ
    \n\npm
    $ NPMのインストール-保存反応怠惰なぼかしイメージ
    畝

    用途
    ここでは、このライブラリを使用して画像を怠惰に読み込むことができます.
    import React from 'react';
import LazyImage from 'react-lazy-blur-image';

const App = () => {
  <div className='App'>
    <div className="container">
      /\\\*Basic implementation\\\*/
      <LazyImage
        placeholder={"https://picsum.photos/id/235/500/500?blur=10"}
        uri={"https://picsum.photos/id/235/500/500"}
        render={(src,style) => <img src={src} style={style} alt="demonstration"/>}
      />

     </div>
  </div>
}

export default App;
    注意:チェックアウトdocumentation 反応怠惰なぼかしイメージの詳細については.

    包む
    怠惰な読み込みのために利用可能な多くのライブラリの中で、この記事は、反応コミュニティの中で最も人気のある、頻繁に使用ライブラリの5レビュー.これらのライブラリの統計情報の要約です.

    反応遅延負荷ライブラリの統計の要約
    各ライブラリには、その長所と短所を持っているが、それはあなたのアプリケーションの要件のための最高のライブラリを選択し、最大の利益を得るために開発者としての義務です.
    The Syncfusion React JS スイートは、単一のパッケージで65高性能、軽量、モジュラー、および応答UIコンポーネントを提供しています.このライブラリは、あなたが完全なアプリケーションを構築するために必要な唯一のスイートです.
    何か質問やコメントがあれば、私たちを介して私達に連絡することができますsupport forums , support portal , or feedback portal . 我々は常にあなたを支援して満足している!

    関連ブログ
  • Top 10 React Component Libraries Every Developer Should Know
  • Everything You Should Know About React 18
  • Create Dynamic Forms in React Using React Hook Forms
  • Unit Testing in React with Jest and Enzyme Frameworks
    • Androidの4大コンポーネントのactivity起動プロセス
    OpenVZ と LXC で目に見える CPU の数