エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Reactで仮想スクロールを独自実装する
はじめに 仮想スクロールとは巨大なリストを高速に表示するための実装テクニックのひとつです。 React ... はじめに 仮想スクロールとは巨大なリストを高速に表示するための実装テクニックのひとつです。 React で仮想スクロールを実装する場合は react-window を使用するケースが多いと思いますが、本記事では仮想スクロールを独自実装することで、その仕組みについて理解を深めて行きたいと思います。 今回のサンプルコードはこちら 仮想スクロールの仕組み 平たく説明すると、現在見えているリストアイテムのみを描画する方法です。 この記事の解説が非常に分かりやすいです。 この記事でやること シンプルな仮想スクロールの実装 この記事でやらないこと 無限ローディングの実装 異なる高さを持つリストアイテムの実装 実装 仮想スクロールのための List コンポーネントを作成していきます。 まずはスクロールさせるための DOM 要素を作成していきます。 import React from "react"; i