5分で反応フックと反応データグリッドから始められます

以前のブログ記事では、反応のクラスを使用する方法を示しました.get started in 5 minutes and customising react data grid , このポストでは、我々はフックを使用して取得し、反応データグリッドを使用するコンポーネントを最適化する方法を開始します.
フックを使用するReact features from functions それで、あなたはこの取得ガイドでどんなクラスも見ません.

Video Tutorial

Example Code

Creating Project From Scratch

Create a Grid Component

carsgrid.js

In Cell Editing

Sorting and Filtering

Data Grid Pagination

Optimising React Data Grid for Hooks

Column Definitions as Objects

Reducing Rendering by Memoizing

Learn More React Data Grid

ビデオチュートリアル

コード例

このブログ記事の例を実行したいなら、githubのリポジトリを見つけることができます.

ダウンロード例react-data-grid

次に、getting-started-5-mins-hooks ディレクトリ

cd getting-started-5-mins-hooks
npm install
npm start

プロジェクトの作成

これは私が開始するために絶対的な基本的なステップを要約します.

プロジェクトを作成するには、NPX作成反応アプリを使用してください

npx create-react-app getting-started-5-mins-hooks

ディレクトリをプロジェクトに変更

cd getting-started-5-mins-hooks

AGグリッドをインストールします

npm install --save ag-grid-community ag-grid-react

その後、我々はブラウザでそれを表示できるように実行しているプロジェクトを起動します

npm start

グリッドコンポーネントの作成

私のすべてのコードを追加するよりもApp.js 私は、AGグリッドを使用してデータをレンダリングするコンポーネントを作成するつもりです.私は私の基本的な車のデータを使用しますので、私は修正しますApp.js 私たちにCarsGrid .

function App() {
  return (
    <CarsGrid />
  );
}

書き込みますCarsGrid インcarsgrid.js ファイルをインポートします.

import {CarsGrid} from `./carsgrid`

カーグリッド.js

の内容carsgrid.js それは取得と同じくらい基本的です.
インポートしますReact そして、私が使用するAgグリッド機能

import React, {useState} from 'react';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

それから私はグリッドにロードするデータを作成します.最初に、これを単純な配列として作成します.

const InitialRowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

最後に、私の反応コンポーネントのJavaScript関数を作成します.

使用状態をレンダリングするデータを設定しますrowData

agグリッドを使用してデータをレンダリングするJSXを返します.

export function CarsGrid() {

    // set to default data
    const [rowData, setRowData] = useState(InitialRowData);

   return (
       <div className="ag-theme-alpine" style={{height: 400, width: 600}}>   
           <AgGridReact
                defaultColDef={{sortable: true, filter: true }}
                pagination={true}
                rowData={rowData}
                >
                <AgGridColumn field="make"></AgGridColumn>
                <AgGridColumn field="model"></AgGridColumn>
                <AgGridColumn field="price" editable={true}></AgGridColumn>
           </AgGridReact>
       </div>
   )
};

これは私にデータをレンダリングする非常に基本的なグリッドを与えます.

AG Gridは多くの機能を提供していますので、以下のような機能を有効にします.

インセル編集

ソート

フィルタリング

ページ

インセル編集

セルを編集可能にするには、カラム定義を変更して追加属性を指定します.editable={true}例えば

<AgGridColumn field="price" editable={true}></AgGridColumn>

これは、価格セルを編集可能になります.

ソートとフィルタリング

カラムをソート可能であるかフィルタリング可能にするには、再びカラムに属性を追加します.

選別可能

<AgGridColumn field="make" sortable={true}></AgGridColumn>

濾過性の

<AgGridColumn field="model" filter={true}></AgGridColumn>

私は個々の属性を介して各列を制御することができます.
しかし、私はむしろソート可能で、フィルタリング可能であるすべてのコラムを構成したいです、そして、私は格子自体でデフォルトコラム定義を加えることによってそれをすることができます.

   <AgGridReact
        defaultColDef={{sortable: true, filter: true }}

データグリッド

グリッドにページ付けを追加したいなら、グリッド上の単一の属性でこれを有効にすることができますpagination={true} .

   <AgGridReact
        defaultColDef={{sortable: true, filter: true }}
        pagination={true}

しかし、このような少量のデータを用いて、グリッド上にページ化、ソート、フィルタリングを行う点は全くありません.
私がグリッドにデータをロードするとすぐに、私たちは、次に、Agグリッドのような反応データグリッドを使用する利点のいくつかを見ることができます.

  React.useEffect(() => {
        fetch('https://www.ag-grid.com/example-assets/row-data.json')
            .then(result => result.json())
            .then(rowData => setRowData(rowData))
    }, []);

多くのデータをグリッドにロードすることで、

グリッドの維持は、ページの位置です

ページ付けとレンダリングが自動的に行われます

ソートとフィルタリングは、高速なプログラミングが必要です

別の機能は、我々は無料のAGグリッドを取得します.
私が初期化されていない状態を修正するならば、Ag格子はAを表示しますloading... メッセージをサーバーからグリッドにロードします.

const [rowData, setRowData] = useState();

フックのための反応データグリッドの最適化

この時点では、ブログのポストのほとんどの地面をカバーしているclass based getting started post .
コンポーネントを最適化する方法はいくつかあります.

状態とオブジェクトを使用して修正を容易にする

レンダリングサイクルを減らす

オブジェクトとしてのカラム定義

現在、グリッドは宣言的に定義された列定義を持っています.

    <AgGridColumn field="make"></AgGridColumn>
    <AgGridColumn field="model"></AgGridColumn>
    <AgGridColumn field="price" editable={true}></AgGridColumn>

これは、実行時にグリッドをカスタマイズするために私に利用可能な柔軟性を減らします.
私が列定義を調整したいならば、私は州を経たオブジェクトとして彼らをセッティングするより良いでしょう.

    const [colDefs, setColDefs] = useState([
        {field: 'make'},
        {field: 'model'},
        {field: 'price', editable: 'true'},
    ]);

そして、私のグリッドの状態を使用する修正.

   <AgGridReact
        defaultColDef={{sortable: true, filter: true }}
        pagination={true}
        rowData={rowData}
        columnDefs={colDefs}>
   </AgGridReact>

この方法では、状態から列を追加または削除したり、属性を調整したり編集したり、カスタムレンダリングを行うことができます.
このようにフックを使った完全な機能部品は次のようになります.

import React, {useState} from 'react';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

export function CarsGrid() {

    const [rowData, setRowData] = useState();

    const [colDefs, setColDefs] = useState([
        {field: 'make'},
        {field: 'model'},
        {field: 'price', editable: 'true'},
    ]);

    React.useEffect(() => {
        fetch('https://www.ag-grid.com/example-assets/row-data.json')
            .then(result => result.json())
            .then(rowData => setRowData(rowData))
    }, []);

   return (
       <div className="ag-theme-alpine" style={{height: 400, width: 600}}>   
           <AgGridReact
                defaultColDef={{sortable: true, filter: true }}
                pagination={true}
                rowData={rowData}
                columnDefs={colDefs}
                >
           </AgGridReact>
       </div>
   )
};

追記によるレンダリングの削減

実行時に列定義を更新したくない場合は、宣言の定義に戻る必要はありません.
オブジェクトを使用して、より長い期間を維持するコードを簡単にします.しかし、我々は必要以上にレンダリングサイクルを必要以上に追加しないことを確認するために、それらを覚えるべきです.
AG Grid Reaction Data Gridは既にレンダリングに適していますが、典型的な実世界での使用では、独自のスタイルと構成のために独自のコンポーネントでAGグリッドをラップします.
私はcolDefs 次のようになります.

    const colDefs = useMemo( ()=> [
        {field: 'make'},
        {field: 'model'},
        {field: 'price', editable: 'true'},
    ], []);

列定義は定数であり、親コンポーネントの変更を再描画するトリガをしません.

詳細データグリッド

もう長いGetting started guide in our documentation また、選択、グループ化、テーマの変更をカバーします.
また、研究にいくつかの反応例がありますshow more use cases of AG Grid .
この投稿のコードはreact-data-grid レポingetting-started-5-mins-hooks フォルダ.