問題タブ [react-window]

react-window-infinite-loader を使用して、material-ui Autocomplete ドロップダウン リスト内に無限スクロール リストを表示しようとしています。リストの一番下までスクロールしたら、サーバーからアイテムの次のページを取得したいと考えています。仮想化されたリストの material-ui Autocomplete の例とreact-window-infinite-loader の例を組み合わせた codesandbox の例を作成しました。リストの一番下までスクロールすると、データの次のページが読み込まれますが、何かが原因でリストが一番上にスクロールして戻ります。新しいデータがロードされた後、スクロール位置を維持するにはどうすればよいですか?

ありがとう！

Electron (Chrome) と React でチャット クライアントを実装してきました。私たちの最優先事項はスピードです。したがって、仮想化されたリスト コンポーネント (「バッファ レンダー」または「ウィンドウ レンダー」とも呼ばれます) を使用する必要があります。特に、react-virtualized、react-window、react-infinite について調べました。

これらすべてのコンポーネントに共通する問題の 1 つは、可変高さのリスト要素をサポートする場合、高さを事前に知る必要があることです。現在、非常に長いチャットもあれば、非常に短いチャットもあり、それが私たちの課題となっています。(EXIF データと ffprobe のおかげで、画像とビデオは簡単です)。

そのため、高さを測定すると同時に、非常に高いパフォーマンスを発揮するという課題に直面しています。明らかな手法の 1 つは、ビューポート外のブラウザー コンテナーに要素を配置し、測定を実行してから、リストをレンダリングすることです。しかし、それはパフォーマンス要件の面で私たちを傷つけます. react-virtualized/CellMeasurer (元の作成者によって保守されていません) や react-window などのソフトウェアは、ライブラリに組み込まれているこの手法を使用しますが、パフォーマンスはやや遅く、信頼性が低くなります。バックグラウンドの Electron Browser ウィンドウを使用してレンダリングと測定を行うという、よりパフォーマンスの高い同様のアイデアがありますが、私の直感では、それほど高速ではありません。

ワードラップ、最大幅、およびフォント規則に従って、文字列の高さを事前に把握するための解決済みの方法が必要であると提出します。

私の現在の考えは、API を介してテキスト データを取得したらすぐに行の高さを計算するために、string-pixel-width のようなライブラリを使用することです。基本的に、ライブラリはこのコードを使用して文字幅のマップを生成します [*]。次に、各テキストの幅がわかったら、計算された最大行幅を超えたときに各行を区切り、最後に行数からリスト要素の高さを推測します。ブレークワードのために少しアルゴリズムをいじる必要がありますが、それを支援するライブラリがあります - css-line-breakは有望なようです。

[*] すべての Unicode 文字範囲を考慮して少し変更する必要がありますが、それは些細なことです。

まだ十分に検討していないオプションには、python weasyprint プロジェクトと facebook-yoga プロジェクトが含まれます。私はあなたのアイデアを受け入れます！