react-windowを使いこなそう

function itemSize(index) {
  return index % 2 ? 50 : 25;
}

<FixedSizeGrid {...props}>
  {({ columnIndex, rowIndex, style }) => (
    <div style={style}>
      row {rowIndex}, column {columnIndex}
    </div>
  )}
</FixedSizeGrid>

class ItemRenderer extends PureComponent {
  render() {
    return (
      <div style={this.props.style}>
        row {this.props.rowIndex}, column {this.props.columnIndex}
      </div>
    );
  }
}

<FixedSizeGrid {...props}>
  {ItemRenderer}
</FixedSizeGrid>

要素に任意のCSS適用用のclassを追加します、

direction: string = "ltr"

テキストの方向とスクロールの方向を設定します。

• ltr (default)
• rtl このプロパティは、グリッドコンポーネント内のCSS direction style に自動的適用されます。

initialScrollLeft: number = 0

初期描画時の水平スクロールオフセットを設定します。

initialScrollTop: number = 0

初期描画時の垂直スクロールオフセットを設定します。

innerRef: function | createRef object

内部コンテナ要素へのRefを追加するための設定値です。

これはアドバンスプロパティです。

innerElementType: React$ElementType = "div"

内部コンテナ要素をタグ名で指定します。

これはアドバンスプロパティです。デフォルトではdivが使われます。

itemData: any

グリッドのアイテムとしてレンダリングするコンポーネントへ渡すデータを設定します。

この設定項目は、レンダリングするコンポーネントをクラスとして切り出す時に使います。

class ComponentThatRendersAGridOfItems extends PureComponent {
  render() {
    // Pass the data source to the item renderer component as itemData:
    return (
      <FixedSizeGrid
        itemData={this.props.itemsArray}
        {...otherGridProps}
      >
        {ItemRenderer}
      </FixedSizeGrid>
    );
  }
}

レンダラーリングするコンポーネントは下記のような実装になります。

class ItemRenderer extends PureComponent {
  render() {
    const { columnIndex, data, rowIndex, style } = this.props;

    // Access the data source using the "data" prop:
    const item = data[rowIndex][columnIndex];

    return (
      <div style={style}>
        {item}
      </div>
    );
  }
}

itemKey: function

デフォルトでは、グリッドはアイテムをキーとして使用します。 次の場合は問題ありません。

• アイテムがソートされない。
• アイテムが変更されない。
• PureComponentを拡張したクラスを使用しない。
• アイテムが状態を持っていない。 グリッドが上記の制約を満たさない場合は、itemKeyプロパティを使用して、アイテムに独自のキーを指定します。

function itemKey({ columnIndex, data, rowIndex }) {
  // Find the item for the specified indices.
  // In this case "data" is an Array that was passed to Grid as "itemData".
  const item = data[rowIndex];

  // Return a value that uniquely identifies this item.
  // For a grid, this key must represent both the row and column.
  // Typically this will be something dynamic like a UID for the row,
  // Mixed with something more static like the incoming column index.
  return `${item.id}-${columnIndex}`;
}

onItemsRendered: function

グリッドの変更によってレンダリングされるアイテムが変更された時に呼ばれるコールバックメソッドです。

このコールバックは、アイテムのインデックスが変更されたときにのみ呼び出されます。 アイテムが他の理由（isScrollingやdata paramsの変更など）で再レンダリングされた場合は呼び出されません。

• overscanColumnStartIndex : オーバースキャン(リスト外で見えてはいない)開始要素列番号
• overscanColumnStopIndex : オーバースキャン(リスト外で見えてはいない)停止要素列番号
• overscanRowStartIndex : オーバースキャン(リスト外で見えてはいない)開始要素行番号
• overscanRowStopIndex : オーバースキャン(リスト外で見えてはいない)停止要素行番号
• visibleColumnStartIndex : 表示開始要素列番号
• visibleColumnStopIndex : 表示停止要素列番号
• visibleRowStartIndex : 表示開始要素行番号
• visibleRowStopIndex : 表示停止要素行番号

function onItemsRendered({
  overscanColumnStartIndex,
  overscanColumnStopIndex,
  overscanRowStartIndex,
  overscanRowStopIndex,
  visibleColumnStartIndex,
  visibleColumnStopIndex,
  visibleRowStartIndex,
  visibleRowStopIndex
}) {
  // All index params are numbers.
}

onScroll: function

ユーザーのスクロールやscrollToメソッドによりグリッドの位置が変化した時に呼ばれます。

• horizontalScrollDirection : 水平方向のスクロール方向
• scrollLeft : 左端からのスクロール位置
• scrollTop : 上端からのスクロール位置
• scrollUpdateWasRequested : スクロールの発生原因がメソッド(scrollToやscrollToItem)による場合はtrue、ユーザー操作の場合はfalseが渡されます。
• verticalScrollDirection : 垂直方向のスクロール方向

function onScroll({
  horizontalScrollDirection,
  scrollLeft,
  scrollTop,
  scrollUpdateWasRequested,
  verticalScrollDirection
}) {
  // horizontalDirection and verticalDirection are either "forward" or "backward".

  // scrollLeft and scrollTop are numbers.

  // scrollUpdateWasRequested is a boolean.
  // This value is true if the scroll was caused by scrollTo() or scrollToItem(),
  // And false if it was the result of a user interaction in the browser.
}

outerRef: function | createRef object

最外部のコンテナ要素にRefを設定します。

outerElementType: React$ElementType = "div"

最外部のコンテナ要素タイプをタグ名で指定します。 大抵の場合はdivが使用されます。

outerTagName: string

このプロパティは非推奨となっています。 最外部のコンテナ要素にタグ名を設定します。

overscanColumnCount: number = 1

現在、グリッドの可視エリアに表示しているアイテムの外側にある、列方向アイテムをレンダリングする数を指定します。

このプロパティは下記の2点からとても重要です。

• オーバースキャンは、タブキーによるフォーカス移動を可能にします。
• オーバースキャンは、ユーザーが最初にスクロール開始時の空きスペースのフラッシュが減少、防止します。

大量のオーバースキャンをすると、パフォーマンスに悪影響を与えるので注意が必要です。 デフォルトでは、1つ分のアイテムをオーバースキャンします。

overscanRowCount: number = 1

現在、グリッドの可視エリアに表示しているアイテムの外側にある、行方向アイテムをレンダリングする数を指定します。

このプロパティは下記の2点からとても重要です。

• オーバースキャンは、タブキーによるフォーカス移動を可能にします。
• オーバースキャンは、ユーザーが最初にスクロール開始時の空きスペースのフラッシュが減少、防止します。

大量のオーバースキャンをすると、パフォーマンスに悪影響を与えるので注意が必要です。 デフォルトでは、1つ分のアイテムをオーバースキャンします。

overscanCount: number

このプロパティは非推奨です。 overscanColumnCountとoverscanRowCountを代わりに使用してください。

overscanColumnsCount: number

このプロパティは非推奨です。 overscanColumnCountを代わりに使用してください。

overscanRowsCount: number

このプロパティは非推奨です。 overscanRowCountを代わりに使用してください。

style: Object = null

最外部のdiv要素に任意のスタイルをインラインで設定します。

useIsScrolling: boolean = false

レンダラー(関数やコンポーネントクラス)に対して、isScrollingパラメータを追加で渡します。 このパラメータは、スクロール中に行・列にプレースホルダーを表示するために使用します。

このプロパティを使用した場合、スクロールが停止した時に追加で描画処理が呼ばれることに注意指定ください。

METHODS

scrollTo({scrollLeft: number, scrollTop: number}): void

スクロール量を指定して、リストをスクロールさせます。

• scrollTop : 上端部からのスクロール量を指定します。
• scrollLeft : 左端部からのスクロール量を指定します。

scrollToItem({align: string = "auto", columnIndex?: number, rowIndex?: number }): void

アイテムの列要素番号・行要素番号を指定してスクロールを行います。

デフォルトでは、指定されたアイテムが表示されるようにリストのスクロール量がなるべく少なくなるようになっています。 この挙動は、第二引数を指定することで変更することができます。

• auto (default) : アイテムが表示される最小のスクロール量でスクロールを行います。既に表示されている場合はスクロールは発生しません。
• smart : 既に表示されている場合はスクロールは発生しません。If it is less than one viewport away, scroll as little as possible so that it becomes visible. If it is more than one viewport away, scroll so that it is centered within the list.
• center : アイテムがグリッドの中央に表示されるようにスクロールをします。
• end : アイテムがグリッドの右下に表示されるようにスクロールをします。
• start : アイテムがグリッドの左上に表示されるようにスクロールをします。

VariableSizeGrid

FixedSizeGridと同様のプロパティに加えて、下記のプロパティが追加で設定できます。

columnWidth: (index: number) => number

任意のカラムの幅を返すメソッドを設定します。

function columnWidth(index) {
  return index % 2 ? 50 : 25;
}

rowHeight: (index: number) => number

任意の行の高さを返すメソッドを設定します。

function rowHeight(index) {
  return index % 2 ? 50 : 25;
}

estimatedColumnWidth: number = 50

描画されていないカラムの平均または大体の列の幅を設定します。

この値は全ての幅の幅が計測される前にグリッドの全幅を見積もるために使用されます。

この見積もった幅はユーザーのスクロール行為に影響を与えます。

列が計測されると更新されます。

estimatedRowHeight: number = 50

描画されていないカラムの平均または大体の行の高さを設定します。

この値は全てのカラムの高さが計測される前にグリッドの全高さを見積もるために使用されます。

この見積もった高さはユーザーのスクロール行為に影響を与えます。

行が計測されると更新されます。

METHODS

This component has the same methods as FixedSizeGrid, but with the following additions:

resetAfterIndices({ columnIndex: number, rowIndex: number, shouldForceUpdate: boolean = true }): void

VariableSizeGridでは、パフォーマンスを目的として、各インデックスのオフセットと測定サイズをキャッシュしています。

このメソッドは、指定したインデックスの以降すべてのアイテムのキャッシュデータをクリアします。 アイテムのサイズが変更されるたびに呼び出されます。

デフォルトでは、インデックスがリセットされた後、グリッドは自動的に再レンダリングされます。 親コンポーネントで状態の更新が完了したあとに更新したい場合は、shouldForceUpdateにfalseの渡すと強制的に再レンダリングします。

resetAfterColumnIndex(index: number, shouldForceUpdate: boolean = true): void

VariableSizeGridでは、パフォーマンスを目的として、各インデックスのオフセットと測定サイズをキャッシュしています。

このメソッドは、指定したインデックスの以降すべての列のキャッシュデータをクリアします。 アイテムのサイズが変更されるたびに呼び出されます。

デフォルトでは、インデックスがリセットされた後、グリッドは自動的に再レンダリングされます。 親コンポーネントで状態の更新が完了したあとに更新したい場合は、shouldForceUpdateにfalseの渡すと強制的に再レンダリングします。

resetAfterRowIndex(index: number, shouldForceUpdate: boolean = true): void

It should be called whenever a row's height changes. (Note that this is not a typical occurrance.)

By default the grid will automatically re-render after the index is reset. If you would like to delay this re-render until e.g. a state update has completed in the parent component, specify a value offalse for the second, optional parameter.

VariableSizeGridでは、パフォーマンスを目的として、各インデックスのオフセットと測定サイズをキャッシュしています。

このメソッドは、指定したインデックスの以降すべての行のキャッシュデータをクリアします。 行の高さが変更されるたびに呼び出されます。

デフォルトでは、インデックスがリセットされた後、グリッドは自動的に再レンダリングされます。 親コンポーネントで状態の更新が完了したあとに更新したい場合は、shouldForceUpdateにfalseの渡すと強制的に再レンダリングします。

METHODS

areEqual

React.memo用のカスタム比較関数 アイテムのレンダーにクラスコンポーネントを使っている場合は、shouldComponentUpdateを代わりに使用してください。

import React, { memo } from "react";

// Step 1: Import areEqual from react-window
import { areEqual } from "react-window";

const Row = memo(
  props => {
    const { index, style } = props;

    return <div style={style}>Row {index}</div>;
  },

  // Step 2: Pass it as the second argument to React.memo()
  areEqual
);

shouldComponentUpdate

クラスコンポーネントのカスタムshouldComponentUpdate実装。 アイテムレンダラーが機能コンポーネントの場合は、代わりにareEqual比較メソッドを使用してください。

import React, { Component } from "react";

// Step 1: Import shouldComponentUpdate from react-window
import { shouldComponentUpdate } from "react-window";

class Row extends Component {
  // Step 2: Bind the sCU method to the component instance
  shouldComponentUpdate = shouldComponentUpdate.bind(this);

  render() {
    const { index, style } = this.props;

    return <div style={style}>Row {index}</div>;
  }
}