React仮想リストの実装

React をインポートし、{useState} を 'react' から取得します。
'biz-web-library' から {VirtualList} をインポートします。
// 各データを表示するためのコンポーネントを定義します。const ItemRender = ({ data }) => {
  dindex = parseInt(data); とします。
  lineHeight = dindex % 2 ? '40px' : '80px' とします。
  戻る （
    <div style={{ lineHeight, background: dindex % 2 ? '#f5f5f5' : '#fff' }}>
      <h3>#{dindex} タイトル名</h3>
      <p>ページの高さに制限はなく、好きなように書けます</p>
    </div>
  );
};
ItemRenderMemo を React.memo に代入します。

// リストデータを初期化する const getDatas = () => {
  定数データ = [];
  (i = 0; i < 100000; i++ とします) {
    datas.push(`${i} アイテム`);
  }
  データを返します。
};

// 仮想リストエクスポートデフォルト（）を使用する => {
  [リソース、setResources] = useState([]);
  const changeResources = () => {
    リソースを設定します(getDatas());
  };

  戻る （
    <div>
      <button onClick={changeResources}>クリックしてください</button>

      <div
        スタイル={{
          高さ: '400px'、
          オーバーフロー: 'auto'、
          境界線: '1px 実線 #f5f5f5'、
          パディング: '0 10px',
        }}
      >
        <仮想リスト
          アイテムレンダラー={アイテムレンダラーメモ}
          リソース={リソース}
          推定アイテムサイズ={60}
        />
      </div>
    </div>
  );
};

// 循環キャッシュリストの全体的な初期化の高さ export const initPositinoCache = (
  推定アイテムサイズ: 数値 = 32、
  長さ: 数値 = 0、
) => {
  インデックスを0とします。
  位置 = 配列(長さ);
  while (インデックス < 長さ) {
    位置[インデックス] = {
      索引、
      高さ: 推定アイテムサイズ、
      上: インデックス * 推定アイテムサイズ、
      下部: (インデックス++ + 1) * 推定アイテムサイズ、
    };
  }
  ポジションを返す。
};

// すべての項目の位置をキャッシュします。let positions: Array<PositionType>;

クラスVirtualListはReact.PureComponentを拡張します{
 
  コンストラクタ(props) {
    スーパー(小道具);
    const {リソース} = this.props;

    // キャッシュを初期化する positions = initPositinoCache(props.estimatedItemSize, resources.length);
    この状態 = {
      リソース、
      開始オフセット: 0,
      listHeight: getListHeight(positions), // 位置の最後のデータの下部属性 scrollRef: React.createRef(), // 仮想リストコンテナ参照
      items: React.createRef(), // 仮想リスト表示領域参照
      visibleCount: 10, // ページ上の表示領域の数 startIndex: 0, // 表示領域の開始インデックス endIndex: 10, // // 表示領域の終了インデックス };
  }
  // TODO: 他の機能を非表示にします。 。 。 。 。


  //レイアウトレンダリング() {
  const { ItemRender = ItemRenderComponent、 extension } = this.props;
  const { listHeight、startOffset、resources、startIndex、endIndex、items、scrollRef } = this.state;
  visibleData を resources.slice(startIndex, endIndex); とします。

  戻る （
    <div ref={scrollRef} スタイル={{ 高さ: `${listHeight}px` }}>
      <ul
        ref={アイテム}
        スタイル={{
          変換: `translate3d(0,${startOffset}px,0)`,
        }}
      >
        {visibleData.map((データ, インデックス) => {
          戻る （
            <li key={data.id || data.key || index} data-index={`${startIndex + index}`}>
              <ItemRender data={data} {...extrea}/>
            </li>
          );
        })}
      </ul>
    </div>
  );
  }
} 

コンポーネントマウント() {
  イベントをオン(this.getEl(), 'スクロール', this.onScroll, false);
  events.on(this.getEl(), 'マウスホイール', NOOP, false);

  // レンダリングに基づいて最新のノードを計算します。let visibleCount = Math.ceil(this.getEl().offsetHeight / EstimationItemSize);
  可視カウント === this.state.visibleCount || 可視カウント === 0 の場合 {
    戻る;
  }
  // visibleCount が変更されたため、endIndex、listHeight/offset を更新します。this.updateState({ visibleCount, startIndex: this.state.startIndex });
}

getEl = () => {
    el = this.state.scrollRef || this.state.items とします。
    parentEl: any = el.current?.parentElement; とします。
    スイッチ(window.getComputedStyle(parentEl)?.overflowY) {
      ケース 'auto':
      ケース 'スクロール':
      ケース 'オーバーレイ':
      '可視'の場合:
        parentEl を返します。
    }
    document.body を返します。
};

スクロールのオン = () => {
    リクエストアニメーションフレーム(() => {
      scrollTop を this.getEl() とします。
      startIndex = binarySearch(positions, scrollTop); とします。

      // startIndex が変更されたため、endIndex、listHeight/offset を更新します。this.updateState({ visibleCount: this.state.visibleCount, startIndex});
    });
  };

// ツール関数、ツールファイルに格納 export const binarySearch = (list: Array<PositionType>, value: number = 0) => {
  開始します: 番号 = 0;
  終了: number = list.length - 1;
  tempIndex = null とします。
  (開始 <= 終了) の間 {
    midIndex = Math.floor((start + end) / 2);とします。
    midValue = list[midIndex].bottom;とします。

    // 値が等しい場合は、見つかったノードが直接返されます（一番下なので、startIndexは次のノードである必要があります）
    if (midValue === 値) {
      midIndex + 1 を返します。
    }
    // 中間値が入力値より小さい場合、値に対応するノードが開始値より大きいことを意味し、開始値は 1 つ前に戻ります。else if (midValue < value) {
      開始 = midIndex + 1;
    }
    // 中間値が入力値より大きい場合、その値は中間値より前であることを意味し、終了ノードは中間 - 1 に移動します。
    そうでない場合（中間値＞値）{
      // tempIndexは値に最も近いすべての値を格納します if (tempIndex === null || tempIndex > midIndex) {
        tempIndex = 中間インデックス;
      }
      終了 = midIndex - 1;
    }
  }
  tempIndex を返します。
};

 更新状態 = ({ 可視カウント、開始インデックス }) => {
    // 新しく計算されたノードに従ってデータを更新する this.setState({
      開始オフセット: 開始インデックス >= 1 ? 位置[開始インデックス - 1]?.bottom : 0,
      リストの高さ: getListHeight(位置),
      開始インデックス、
      表示数、
      終了インデックス: getEndIndex(this.state.resources, 開始インデックス, 可視カウント)
    });
  };

// 以下は他のファイルに配置されるツール関数です export const getListHeight = (positions: Array<PositionType>) => {
    index = positions.length - 1 とします。
    インデックス < 0 ? 0 を返す: positions[index].bottom;
  };

エクスポートconst getEndIndex = (
  リソース: 配列<データ>、
  開始インデックス: 数値、
  表示数: 数値、
) => {
  resourcesLength を resources.length とします。
  endIndex = startIndex + visibleCount とします。
  resourcesLength > 0 を返します。Math.min(resourcesLength, endIndex) : endIndex;
}

 コンポーネントを更新しました() {
  this.updateHeight();
}

  
高さの更新 = () => {
  items: HTMLCollection = this.state.items.current?.children; とします。
  if (!items.length) が return;

  // キャッシュを更新 updateItemSize(positions, items);

  // 合計の高さを更新します let listHeight = getListHeight(positions);

  // 合計オフセットを更新します。let startOffset = getStartOffset(this.state.startIndex, positions);

  this.setState({
    リストの高さ、
    開始オフセット、
  });
};

// 以下は他のファイルに配置されるツール関数です export const updateItemSize = (
  位置: 配列<位置タイプ>,
  アイテム: HTMLコレクション、
) => {
  Array.from(items).forEach(item => {
    index = Number(item.getAttribute('data-index')); とします。
    高さを item.getBoundingClientRect() に設定します。
    oldHeight = positions[index].height;とします。

    // 差異がある場合は、このノード以降のすべてのノードを更新します。let dValue = oldHeight - height;
    if (dValue) {
      位置[インデックス].bottom = 位置[インデックス].bottom - dValue;
      位置[インデックス].height = 高さ;

      (k = インデックス + 1 とします; k < positions.length; k++) {
        位置[k].top = 位置[k - 1].bottom;
        位置[k].bottom = 位置[k].bottom - dValue;
      }
    }
  });
};

//現在のオフセットを取得する export const getStartOffset = (
  開始インデックス: 数値、
  位置: Array<PositionType> = [],
) => {
  startIndex >= 1 ? positions[startIndex - 1]?.bottom : 0 を返します。
};

エクスポートconst getListHeight = (positions: Array<PositionType>) => {
  index = positions.length - 1 とします。
  インデックス < 0 ? 0 を返す: positions[index].bottom;
};

 静的 getDerivedStateFromProps()
    次のプロパティ: 仮想リストプロパティ、
    前の状態: 仮想リスト状態、
  ）{
    const { リソース、estimatedItemSize } = nextProps;
    if (リソース !== prevState.resources) {
      位置 = initPositinoCache(推定アイテムサイズ、リソースの長さ);

      // 高さを更新します let listHeight = getListHeight(positions);

      // 合計オフセットを更新します。let startOffset = getStartOffset(prevState.startIndex, positions);

     
      endIndex = getEndIndex(resources, prevState.startIndex, prevState.visibleCount); とします。
     
      戻る {
        リソース、
        リストの高さ、
        開始オフセット、
        終了インデックス、
      };
    }
    null を返します。
  }