クライアント側のページ付けによる反応表の使用

あなたが読むよりむしろ見たい方がよいならば:
https://youtu.be/v9E7moqUJ40
ページのページにコンテンツを分割することができます簡単なナビゲーション手法です.大量のレコードセットを複数のページに表示したい場合、例えばデータの膨大な量のテーブルでは非常に便利です.
この記事では、クライアント側のページを使ったページを使って反応テーブルを使う方法を教えますreact-rainbow-components . このチュートリアルを実行するには、Return,Nodeの一般的な背景が必要です.JSと糸.

プロジェクト設定

必要なもの

ノード.js

糸

お気に入りのIDE (このチュートリアルでは、vscodeを使用します).

依存関係を追加する

このプロジェクトのために、私は新しい作成反応アプリプロジェクトを使用します.プロジェクトの初期化と初期化方法を知りたい場合は、https://create-react-app.dev/ .
プロジェクトのルートでいったんレインボーのコンポーネントをインストールし、問い合わせを行いましょう.

$ yarn add react-rainbow-components react-query

一度インストールされたすべての依存関係を使用して新しいアプリケーションを持って、我々はコードを準備する必要があります!

コーディング

依存関係のインポート

さて、反応クエリをインポートし、レインボーコンポーネントを操作します.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { Table, Column } from 'react-rainbow-components';
import './App.css';

サービスの作成

すべての国でリストを取得する関数を作成します.

const API_URL = "https://sampleapis.com/countries/api/countries";
const fetchCountries = async () => {
    const result = await fetch(API_URL);
    return result.json();
};

私は、名前、資本、人口、通貨、および多くのような国についての特定の情報を持つリストを返す無料APIを使用しています.

国構成要素

では、API呼び出しによって返されたすべての国とテーブルをレンダリングする国コンポーネントを追加しましょう.

function Countries() {
    const { isLoading, data } = useQuery(
        "countries",
        fetchCountries,
    );
    return (
        <Table
            className="countries-table"
            keyField="name"
            isLoading={isLoading}
            data={data}
            variant="listview"
        >
            <Column header="Name" field="name" />
            <Column header="Capital" field="capital" />
            <Column header="Population" field="population" />
            <Column header="Currency" field="currency" />
        </Table>
    );
}

APIへの呼び出しを行うには、Resourcesクエリパッケージからusequery hookを使用しました.https://github.com/tannerlinsley/react-query ). このフックは、私たちのためのフェッチを管理して、データ、isloading、エラーとより多くでオブジェクトを返します.したがって、フェッチプロセスの異なる状態を維持する必要性は避けられます.また、キャッシュのような他の利点を提供し、バックグラウンドでの日付データの更新、パフォーマンスの最適化、および多く.あなたが反応質問についてもっと知りたいならば、そのドキュメンテーションを訪問してくださいhttps://react-query.tanstack.com/overview .
レインボーコンポーネントテーブルは、必要なKeyField支柱を必要とします.データベース内のドキュメントまたは行を表すIDまたはキーのような一意のデータ内の任意のフィールドを指定できます.この場合、私はユニークな国名を使用しました.テーブルはまた、それが真実であるときに読み込み状態をレンダリングするisloadを受信する.そして、データがオブジェクトにおいて、配列であるデータは表に示す.列はテーブルの子として表され、列ヘッダーに表示される単純な文字列を受け取る.また、その値が列に表示されるデータのキーを表すフィールドを受け取ります.

アプリケーションコンポーネント

次に、エクスポートされるアプリケーションコンポーネントを追加します.このコンポーネントには、国コンポーネントの周りにQueryClientProviderラッパーしかありません.

const queryClient = new QueryClient();
function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Countries />
        </QueryClientProvider>
    );
}
export default App;

QueryClientは、Replyクエリによって管理されたキャッシュと対話するために使用されます.QueryClientProviderでアプリケーションをラップすることで、QueryClientアプリケーション内の任意の場所にアクセスできます.

スタイリング

次に、表コンポーネントに簡単なスタイルを追加します.

.countries-table {
    padding: 40px;
    background-color: rgb(244, 246, 249);
    height: 100%;
    min-height: 100vh;
}

ページを保存して再読み込みすると、次のようになります.

あなたはそれを見て、これで遊ぶことができますsandbox :

この解決策の問題

今、私たちはすべての国を示している大きなテーブルを持っていますが、これはページ上であまりにも多くの行を描画しており、そのような量のDOM要素を作成することは高価であるので、これは性能問題を引き起こす可能性があります.
どのように解決するには?ここでは、クライアント側のページ化が遊びに来るときです.あなたのコレクションまたはテーブルにあまりにも多くのレコード(数百または数千)がない場合は、次にそれらをすべて取得し、次のようにクライアント側のページ付けを行うことができます.

クライアント側のページ

クライアント側のページ付けを実現するには、TherleWithserserPagiliationコンポーネントをReactive Rainbowコンポーネントライブラリから使用できます.あなたがする必要がある唯一のことは、それをインポートしてpageSize プロップあなたがページごとに表示するレコードの数.
「Ready Rainbow」コンポーネントのインポート行を「次へ」に置き換えます.

import { TableWithBrowserPagination, Column } from 'react-rainbow-components';

ここだけ変更Table for TableWithBrowserPagination .
次に、「国」コンポーネントを変更して、TableWirowserPaginationを使用します.

function Countries(params) {
    const { isLoading, data } = useQuery(
        "countries",
        fetchCountries,
    );
    return (
        <TableWithBrowserPagination
            className="countries-table"
            keyField="name"
            isLoading={isLoading}
            data={data}
            variant="listview"
            pageSize={15}
        >
            <Column header="Name" field="name" />
            <Column header="Capital" field="capital" />
            <Column header="Population" field="population" />
            <Column header="Currency" field="currency" />
        </TableWithBrowserPagination>
    );
}

このコードには2つの簡単な変更がありました.まず、TableWithserserPaginationのテーブルを変更し、新しいプロップPageSizeを15の値で追加します.これは、ページごとに15行だけレンダリングされます.
では、

ご覧の通り、ページの下部にページがあります.今、あなたは別のページを移動することができます.すべてのデータは既に読み込まれていますが、ページごとに15行しか出力しません.このように、あまりにも多くのDOM要素を作成することによって引き起こされるパフォーマンスの問題を回避します.

結論

それはすべての人々です!
コードのいくつかの行だけで、クライアント側のページ付けを持つテーブルを使用しました.主な隠れ家は、単にページにデータを分割することにより、良いユーザーエクスペリエンスを達成することができます.だけでなく、パフォーマンスの問題を解決するが、それはまた、大きなスクロールバーを持つテーブルを表示するので、データを表現する良い方法を与えるユーザーに迷惑をかけることができます.
読書ありがとう!