React-window: バージョン2の変更

私たちの場合、水平リストはモバイルで広く使用されています。 コントロールのような無限にスクロール可能なカルーセルにも使用しています。 IMOはモバイル上にある必要があります。

ユースケース@istarkovを共有していただきありがとうございます。 水平ウィンドウの有効な使用例がないと思うわけではありません。 私はそれらがはるかに一般的ではないと思います。 （カルーセルの場合でも、多くの場合、「スクロール」イベントベースのウィンドウ処理を必要としない左/右矢印ナビゲーションを使用します。）一部を相殺するためにv2のサポートを削除する方が（私にとっては）より良いルートかもしれないと思います。事前レンダリング、動的サイジングなどで導入することを計画している複雑さの

私は、このよりスリムなアプローチに本当に興奮しています。これにより、よりシンプルで、パフォーマンスが高く、よりシンプルなコードにつながることを願っています。

すごい。 しかし、可変サイズのリストを削除することについてはほとんど心配していません。 可変サイズのリストをDynamicListに置き換えることを計画していますが、アイテムにスクロールできない動的リストの問題は、一部のコンポーネントにとって非常に便利な機能であり、そのような要件が時間の経過とともに発生する可能性があるため、予測できません。 react-windowはあなたのニーズに合います。
私が見る2番目の問題は、動的リストのパフォーマンスです。可変サイズのリストと同じパフォーマンスを動的リストに提供できる場合は、scrollToItemをサポートしていなくてもドロップしてもかまいませんが、そうでない場合は、開発者がロックインされる可能性があります。動的リストが遅く、アイテムへのスクロールがサポートされていないという奇妙な状況では、リストには固定アイテムの高さしかありません。

可変サイズのリストをDynamicListに置き換えることを計画していますが、アイテムまでスクロールできない動的リストの問題

これは固有の制限ではなく、現在の実装の1つにすぎないと思います。 その機能をどのように提供できるかについてのアイデアがあります。 取り組む時間を見つけるかどうかは別の質問です：smile：

私が見る2番目の問題は、動的リストのパフォーマンスです。可変サイズのリストと同じパフォーマンスを動的リストに提供できる場合は、scrollToItemをサポートしていなくてもドロップしてもかまいませんが、そうでない場合は、開発者がロックインされる可能性があります。動的リストが遅く、アイテムへのスクロールがサポートされていないという奇妙な状況では、リストには固定アイテムの高さしかありません。

それが同様に機能するかどうかを言うのは難しいです。 動的リストはより多くの作業を行う必要があるように思われるため、パフォーマンスが低下する可能性があります。 多分違いは重要かもしれませんが、そうではないかもしれません。 現在サポートしていないものをサポートできるようにしたいので、新しい機能を追加するにはスコープを縮小する必要があると思います。 ただし、現在変数リストに満足している場合は、v2にアップグレードする理由はありません（少なくとも近いうちに）。

@bvaughnこれは私にはドキュメントのように見えます！
去年の夏からこれに取り組んでいますか？ ;-)

もっと深刻なことに、私はファンではありませんが、レンダリング小道具はこのコンテキストでは理にかなっていると思います。

いいえ、今朝書きました😝疲れました。

私はファンではありませんが、レンダリング小道具はこのコンテキストでは意味があると思います。

ファンではない理由を詳しく説明していただけますか？

水平リスト/グリッドのサポートは、 AutoSizer （react-virtualized-auto-sizer）のようなオプトイン機能として意味がありますか？

水平リストにはreact-virtualizedとreact-windowの両方を使用しましたが、react-windowAPIの方がはるかに簡単です。 私は、より単純なAPIを期待して、非推奨の必要性を理解しています。

グリッドのサポートはまだ計画されています。 水平方向のサポートをオプトインします。実際にはそうではありません。 それは意味がないと思います。

@bvaughn私は一般的にレンダリング小道具を楽しんでおり、それらはあなたが概説した問題を解決しますが、私はそれらがネストされたロジックの束を含むかもしれないし含まないかもしれないインライン関数を奨励すると思います。 🤔ここでの障害はユーザーにあります。 🙂

組積造グリッドを実現できますか？

@nikitapilgrimいいえ。 react-virtualizedのMasonryコンポーネントを使用することをお勧めします

https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md

感謝しますが、react-virtualizedでのみ機能しますか？

@nikitapilgrimうん。 👍
React-virtualizedは、react-windowがサポートしていない多くの機能をサポートしています。

パッケージをより小さく、より速くすることに焦点を当てるために、react-windowの範囲は大幅に縮小されています。 😉

react-virtualizedの機能が必要な場合は、それに固執することをお勧めします-それでも素晴らしいライブラリです！

このreact-virtualized babel 7問題の解決策を探していたので、 react-windowに出くわしました。 react-virtualized Masonryコンポーネントを使用していますが、 babelアップグレードした後は使用できなくなりました。

これは、react-virtualizedの問題を報告する場所ではありません。

@bvaughnに同意しました。 しかし、自分自身と@babangsundはその上@nikitapilgrimする答えMasonryコンポーネントの意志がで導入されていないreact-window 、代わりに使用するreact-virtualized 。 ただし、ユーザーが最新の[email protected]と[email protected] （ create-react-app ）、 react-virtualizedは必ずしも機能するとは限りません。

同じうさぎの穴を下る人にとっては、それが役立つ情報だと思います。
¯\ _（ツ）_ /¯

バージョン2をダウンロードできる動的サイズリストを使用したいのですが、react virtualiseを使用する必要がありますか？

これは私のリストが可変サイズのリストでどのように見えるかです

これは一般的なサポートの問題ではありません。 トピックについてコメントを残してください。

フィードバックをいただければ幸いです

私はトレロのような製品にreact-windowしていますが、ここにいくつかの考えがあります。

小道具をレンダリングする

これは、単純であり、前述の欠点を回避するため、良い変更のように思われます。 また、APIはreact-nativeのFlatListに似ています。 https://github.com/bvaughn/react-window/issues/85でディスカッションを読んだことを覚えてい

コンポーネントが少ない
水平リストのサポートはなくなりました

horizontalサポートとVariableSizeListの削除に強く反対します。 ご想像のとおり、これらは私が使用する主な2つです。 それらの実装は本当に維持するには負担が大きすぎますか？ そうでない場合は、再考して保管していただければ幸いです。

その他の変更については、強い意見はありません。 overscanCount削除は少し心配ですが、カスタム値が必要なユースケースにはまだ直面していないので、おそらく問題ありません。

ねえ@bvaughn！ このパッケージをありがとう！ 仕事中のプロジェクトにバージョン2を組み込むことを検討しています。 これがいつリリースされるかについて、あなたは球場を持っていますか？

このライブラリに感謝し、将来のリリースの計画を共有することは、技術的負債を軽減するのに非常に役立ちます。

最近のreact-window以降のバージョン2を使用してWindowScroller動作を行う「簡単な」方法はありますか？

それが不可能な場合、これはこのバージョン2の境界外になりますか？ またはこれは後で追加できますか？

私のコンテキストでは、レイアウトにフッターが含まれており、 DynamicSizeListような最新のアプローチを使用すると、2番目のスクロールバー（1つはページ用、もう1つは製品リスト用）が導入されます。

素晴らしいパッケージ。 デフォルトで動的な高さリストを熱心に待っています-現時点では、レンダリングされた行の高さを親リストに戻すためのカスタムロジックをたくさん作成しました。 うまくいけば、この新しいバージョンで私はそのロジックを削除することができます。 これに取り組んでくれてありがとう！

@ltkn @mrdanimal

ウィンドウスクローラーを使用する方法はすでにあります。
https://github.com/bvaughn/react-window/issues/30#issuecomment -428868071

左または右の両方向に無限にスクロールする方法!!!

我々が持っている場合はWindowScrollerせずには依存するreact-virtualized素晴らしいものです。 react-window背後にある目標により、 react-virtualizedと比較してはるかに効率的でコードが少なくなったため、 react-virtualizedからWindowScrollerを使用したくありません。 代わりに、 react-virtualized-auto-sizerような別のパッケージを探します。

前もって感謝します。

@prabusamvel hm ..
別のパッケージの利点は何ですか？

新しいDynamicSizeListで遊んでいます。 とてもかっこいい！ 方向タイプに「ttb」と「btt」（上から下、下から上）を含めることで、大きな機能強化ができると思います。 現在、上にスクロールするリストを実装するクリーンな方法はありませんが、他のすべての方向がサポートされています。

@toddmacintyreこのバージョン2が見つかりません。

@muhammedmagdi npm install react-window@next

バージョン2がここの仕様で必要なDOM構造をサポートできれば素晴らしいでしょう-https： //www.w3.org/TR/wai-aria-1.1/#grid＃217はまだ私たちにとって問題です。 私が知る限り、バージョン2の提案は今のところそうではありません。

@mjurkowski @bvaughn yarn add react-window@nextは1.6.0-alpha.1インストールします。 また、動的リストサンドボックスの例https://react-window-next.now.sh/#/examples/list/dynamic -sizeを実行しようとすると、 Error importing GitHub repository: Could not find package.jsonスローされます。

グリッドでもindexを渡すのはどうですか？:)

アプリケーションの一部には、可変幅の列ヘッダーを持つグリッドが必要です。 グリッドと組み合わせた水平可変サイズのリストを使用し、2つのスクロールを同期することで、これを実現しました。

水平リストを削除すると、そのUIを作成できなくなります（または、少なくとも、列ヘッダーグリッドに1行ある2つのグリッドを使用するようにUIを書き直す必要があります。

次の製品はすごいですね。 しかし、私は水平と垂直の両方が必要なので、参考までに私は自分で作成しました： https ：

フィードバックを歓迎します。

スティッキーな要素をサポートすることは、react-windowへの素晴らしい追加になると思います。 これはかなり一般的なユースケースであり、リストとグリッドの両方に実装するのは簡単です。

APIは次のようになります。

<Grid
    // First 2 columns are sticky
    stickyLeft={2}
    // Last column is not sticky (default value)
    stickyRight={0}
    // First and last rows are sticky
    stickyTop={1}
    stickyBottom={1}
/>

粘着性を機能させるための2つの重要な要素は次のとおりです。

1. 粘着性のないセルが軸のウィンドウの外にある場合にのみ、粘着性のあるセルをアンマウントします
2. position: sticky代わりにabsoluteを使用し、粘着性のない軸にはleftとtop代わりにleft margin-xを使用します

このような優れた機能のコストは妥当なようです。

• フットプリントは最小限です
• パフォーマンスに大きな影響はありません（いくつかの余分な行/列をレンダリングするだけです）
• ブラウザのサポートは素晴らしく、 position: stickyサポートしていないものは通常のバージョンを見るだけです

このユースケースが具体的すぎてそのままサポートできないと思われる場合は、ポイント1のみをサポートすることをお勧めします。セルをレンダリングするかどうかを指定できると、スティッキネスを簡単に実装できます。

必要に応じて喜んでお手伝いさせていただきます。

サイズの自動測定と更新はサポートしていません。

これはかなり大きなマイナス面だと思います。 私が作成したほぼすべてのグリッドには、3つまたは4つの固定幅の列（ステータスラベル、一部のメタデータ、アクションの呼び出しなど）と、残りの使用可能なスペースを占める1つの動的幅の列が必要です。

「サポートされていない」とは、Autosizerのような追加のコードやコンポーネントを追加しても、必ずしもこれが不可能であることを意味するわけではありません。これらのユースケースを十分に検討し、動的な列ですが、反応したくありません-それがもたらすすべての荷物のために仮想化されています。

動的な列が必要な場合は、これらのユースケースを十分に検討し、ソリューションを文書化しておくと便利です。

完全に理解されていますが、実際には、それは多くの努力を必要とし、このライブラリは愛の努力でした（有料の努力ではありません）。 残念ながら、私はスコープダウンしたv2の取り組みを終える時間すらありませんでした。ましてや、もっと積極的なことは言うまでもありません。 😞

動的な列が必要な場合は、これらのユースケースを十分に検討し、ソリューションを文書化しておくと便利です。

完全に理解されていますが、実際には、それは多くの努力を必要とし、このライブラリは愛の努力でした（有料の努力ではありません）。 残念ながら、私は_スコープダウン_ v2の取り組みを終える時間すらありませんでした。ましてや、もっと積極的なことは言うまでもありません。 😞

うん。 わかりました。 うまくいけば、そのような努力はコミュニティ主導になることができます。

いいでしょう-しかし私の経験では、それは決して起こりません：smile：

DynamicSizedListでWindowScrollerを使用できませんでした。おそらく、ジャストインタイムレンダリングによってscrollToがうまく機能しなくなったためです。 これは新しいバージョンで可能ですか？

私にはこの努力を終える時間もエネルギーもないという事実を受け入れました。 誰かが私が始めたブランチに足を踏み入れて終了したいのであれば、私はあなたの助けを歓迎します。 （ List詳細については、問題＃6も参照してください。ジャストインタイム測定をサポートするには、 Gridを実装する必要があります。）

こんにちは@bvaughn 、
いくつかのランダムなメモを使用して、フォークに関するディスカッションを作成しました。
リストに載せてはいけないものや正しくないものがあれば教えてください。 進歩したらリストを完成させます。

良いもののように見えます