React-window: ジャストインタイムで測定されたコンテンツをサポートする

https://github.com/bvaughn/react-window/compare/master...issues/6で入手可能なMVPの進行中の作業

私はこれをmui-downshift内で使用し、現在もUNSAFE_componentWillReceiveProps使用していますが、近い将来（動的コンテンツの高さが利用可能になったら） react-windowに移植する予定です。

これはIOSのUITableViewで再利用可能なメカニズムですか？

@luobodingあなたの質問がわかりません。 詳しく教えていただけますか？

@bvaughn申し訳ありませんが、私の友人、私の英語はあまり上手ではありません。

私のプロジェクトに問題があります、select要素に何千ものオプションがあります、ページのリロード時に非常に遅くなり、詰まります、私はそれをより良くするためにコンポーネントを書き込もうとしました、私はIOS開発者でした、私はで再利用可能なメカニズムを知っていますIOSのUITableView、500pxの高さのselect要素が必要な場合は、option-elementの高さを100pxに構成するので、（Math.floor（500/100））の数のオプション要素とキューの容量（現在表示されているデータソースキュー）を作成する必要があります）、選択した要素を上下にスクロールするときは、キューにプッシュまたはポップして再レンダリングします。

プロジェクトにreact-windowをインポートしたいのですが、前述のように機能しますか？

あなたが説明しているのは、react-window（および一般的にはウィンドウ処理またはオクルージョンカリング）がどのように機能するかです。 ただし、この問題とは実際には関係ありません。 これは、ウィンドウ化されたコンテンツをジャストインタイムで測定することです。 あなたの場合、オブジェクトの高さは固定されているため、 FixedSizeListコンポーネントを使用できます： https ：//react-window.now.sh/#/examples/list/fixed -size

react-windowでネイティブにアドレス指定されたアンカーを見るのはうれしいです。

ちなみに、ダイアグラムでバーを少し上げすぎたら申し訳ありません…😅

@bvaughnいつこの機能をリリースしますか、私はそれを探しています

今これを完了する時間（とエネルギー）を見つけるのに苦労しているので、この機能なしで1.0.0を公開しました。 まだ将来的に追加する予定です。 いつの見積もりはありません。

ポリマーの「鉄のリスト」は、私がここで提案しているものと同様の手法を使用しているようです： https ：

これは私たちにとって本当に便利です。今のところ、CSSを、仮想リストに渡すためだけに高さの計算を複製するコンポーネントロジックと同期させる必要があるようです。

@kevinderは、ジャストインタイムで測定されたコンテンツにどのように対処しているかを共有できますか？ 前もって感謝します

@carlosagsmendesはこれが役立つかどうか

1.）コンストラクターで、リストとChatHistoryコンポーネントの参照を作成します。

  constructor(props) {
    super(props);
    this.listRef = createRef();
    this.chatHistoryRef = createRef();
    this.listHeight = 0;
  }

次に、リストのレンダリングを担当するChatHistoryを渡します。

2.）親コンポーネントのcomponentDidMountで、 ChatHistory refを使用して要素の高さを取得します。

componentDidMount() {
    this.listHeight = this.chatHistoryRef.current.offsetHeight;
}

3.）親コンポーネントでは、配列をチャット履歴の詳細を含む状態に維持します。 その配列に新しいアイテムを追加するとき、私は次のようにします。

  // find out how many pixels in height the text is going to use
  const size = getSize({
    text: displayText,
    className: styles.message,
  });

  let { height } = size;
  height += 20; // adds some spacing in pixels between messages
...rest of items needed for the chat history item..add them all to an array and update state

getSizeはhttps://github.com/schickling/calculate-sizeに基づいてい

これを達成するためのより良い方法があると確信していますが、それはかなり速いようで、まだ問題は発生していません

@osdlge ：Code Sandbox（または同様のもの）のように、私がチェック

@bvaughn確かに、コードの関連部分をhttps://codesandbox.io/s/5z282z7q1lに抽出しました

共有してくれてありがとう！ 😄

進行中のいくつかの作業を、遅延測定されたコンテンツに関する最初のアプローチに、issue / 6という名前のブランチにプッシュしました。

デモも展開しました：
https://react-window-next.now.sh/#/examples/list/dynamic -size

とてもかっこいい。

issue / 6ブランチのソースとこのディスカッションを読みながら、無限スクロールに関する一般的な問題を理解しようとしています。 したがって、質問に続く質問は意味をなさないかもしれませんが、これをさらに理解したいので、ここで説明します。

上記の「スクロールアンカー」への言及は、リンクされた記事やCSSスクロールアンカー仕様のような手法としてのスクロールアンカーに関連してい

前もって感謝します

これは、最初のリンクに接線方向に関連していますが、2番目のリンクには関連していません。 これは、他の仕様や提案に関連しているのではなく、私にとって意味があるという理由で、この問題に使用することを選択した用語です。

また、react-windowのプレリリースバージョンを「次へ」としてNPMに公開しました（例： yarn add react-window@next ）。

このコードサンドボックスをフォークすることで、それを試すことができます。
https://codesandbox.io/s/5x8vlm0o7n

私はそれをテストしました。 私は10000段落を試し、最後までジャンプしようとしました。 ぎくしゃくした。
私が正しく理解していれば、それは最後にあると推定される行だけを測定するはずだったので、それは即座に最後までジャンプするはずでした。 これは正しいです？

2018年10月12日には、午前12時53分で、ブライアン・ヴォーンの[email protected]は書きました：

また、react-windowのプレリリースバージョンを「next」としてNPMに公開しました（例：yarn add react-window @ next）。

このコードサンドボックスをフォークすることで、それを試すことができます。
https://codesandbox.io/s/5x8vlm0o7n https://codesandbox.io/s/5x8vlm0o7n
—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信するか、GitHub https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555で表示するか、スレッドをミュートしますhttps://github.com/notifications/unsubscribe-auth/ AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P 。

いいえ、プッシュした最初のブランチはアルゴリズムを実装していません
この号で説明されています。 それは必要なより素朴なアプローチを取ります
後のコンテンツをレンダリングする前に、前のコンテンツを測定します。

混乱させて申し訳ありません！

金、2018年10月12日には、午前6時34分PM akraines [email protected]は書きました：

私はそれをテストしました。 私は10000段落を試し、にジャンプしようとしました
終わり。 ぎくしゃくした。
私が正しく理解していれば、推定された行のみを測定する必要がありました
最後になるため、それは即座ににジャンプする必要があります
終わり。 これは正しいです？

2018年10月12日には、午前12時53分で、ブライアン・ヴォーンの[email protected]は書きました：

また、react-windowのプレリリースバージョンをNPMに公開しました。
「次へ」（例：yarn add react-window @ next）。

このコードサンドボックスをフォークすることで、それを試すことができます。
https://codesandbox.io/s/5x8vlm0o7n < https://codesandbox.io/s/5x8vlm0o7n

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示<
https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555>、
またはスレッドをミュートします<
https://github.com/notifications/unsubscribe-auth/AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P
。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/bvaughn/react-window/issues/6#issuecomment-429282228 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AABznR5R1N0ErukleIfvaLQORF_NECgRks5ukHBHgaJpZM4UTb3P
。

ねえ、
公式リリースの見積もりはありますか？

私のチームは、開始した新しいプロジェクトにreact-virtualizedを使用していますが、上にスクロールして特定の行インデックスにジャンプする機能が必要です（行には画像やその他の変化するコンテンツを含む動的コンテンツがあると想定できるため）。

アルファリリースでreact-windowに移行することをお勧めしますか？ それとも、公式リリースを待つ必要がありますか？

また、この機能の完成に貢献できる方法があれば、お手伝いしたいと思います😄

残念ながら、私は多くのテストを行っておらず、テストを行うときにどのような種類の問題が発生するか（または修正にかかる時間）がわからないため、現時点ではリリースタイムラインにコミットできません。それら）。

貢献したい場合は、アルファリリースをテストして、それがどの程度うまく機能しているか、バグを見つけたら私に知らせてください。

私はおそらくこれにもっとすぐに焦点を合わせるでしょう、しかし私はどれくらい早く言うことができません。 特に次の1、2週間は、React confに気を取られ、16.6リリースの準備ができています。

@bvaughn素晴らしい仕事👏最後に遊んでみる時間があります。 🕹

display: noneリストを非表示にする場合、いくつかの調整が必要なようです。たとえば、2つのタブがあるページがあり、現在の状態（スクロール位置など）を失うことなくそれらを切り替えたい場合、これは珍しい使用例ではありません。 。

問題を提示する単純なコードサンドボックス：
https://codesandbox.io/s/p7vq18wmjq

これは、display noneをトリガーすると、すべての子がoffsetHeight === 0を持つために発生します。
サイズ変更は、キックインと更新された新しい値を監視します。 react-windowは、呼び出し元が非表示にすることを決定した場合、この状況を気にする必要はありません。basicはhandleNewMeasurementsブロックすることで処理する必要があります。

この行の場合
https://github.com/bvaughn/react-window/blob/issues/6/src/DynamicSizeList.js#L443
に変更されます

handleNewMeasurements: instance._handleNewMeasurements

次に、デフォルトロジックをオーバーライドできます

let _handleNewMeasurements

<DynamicSizeList  
  ref={current => {
    if (current) {
      _handleNewMeasurements = current._handleNewMeasurements
      current._handleNewMeasurements = (...args) => {
        if (!isHidden) {
          return _handleNewMeasurements(...args)
        }
      }
    }
  }}
  {...otherProps}

このブランチに更新をプッシュし（そして新しい@nextタグをNPMに公開し）、スクロールの進行中にサイズ変更されたアイテムを説明するためにmargin-topを使用して、Firefoxのスムーズスクロールのバグを修正しました。 思ったより複雑ですが、今のところこれを処理するより良い方法がわかりません。 （極端な場合にはまだいくつかの粗いエッジがあるかもしれないと思うので、このアプローチのいくつかのテストをさらに行う必要があります。）

上記のフィードバック、@ piecykに感謝します。 私はまだそれを掘り下げる時間がありませんでした。 （これは、現時点ではまだ私にとっては単なる副次的なプロジェクトです。）

少なくともFirefoxではscrollByを優先して、マージンハックを削除できる可能性があるようです。 ただし、最初にIEとEdgeをテストする必要があります。 彼らには独自の課題があるかもしれません。

ええ@bvaughn私は知っています、素晴らしい仕事👏あなたが時間を見つける方法がわかりません！ 🥇あなたへの称賛！

しかし、リストがdisplay noneで非表示になっているDOM要素にある場合の問題に戻りましょう。基本的に、ラッパーに高さ、幅があるかどうかを確認する必要があります。そうでない場合は、レンダリングを開始しません（現在はレンダリングを試みます）リスト全体）明日それを修正しようとします（何かを隠しておきます）

うん。 あなたが説明している問題の核心を理解しています。 ただし、インスタンスメソッドをオーバーライド/モンキーパッチすることでハッキングするというアイデアは嫌いなので、最初にもう少し考えてみたいと思います。

@nextパッケージが壊れているようですか？

https://codesandbox.io/s/5x8vlm0o7n

それが質問を残すのに適切な場所であるかどうかわからないので、私が間違っている場合はすみません。 つまり、要するに：

• 私はDynamicSizeListをAutoResizerと一緒に使用しましたが、一般的にはうまく機能します。 称賛！
• コンテンツを拡張（補足情報を含むdivを追加）および縮小できる行を紹介するように依頼されました。
• また、これらの行に、グローバルな展開/縮小アクションをリッスンする小道具を（reduxを介して）追加しました。
• 楽しいものが始まります。 展開/縮小をクリックすると、すべてが見栄えがします。
• 少しスクロールしてからすべての行を展開/縮小すると、格納される行の数は展開された行の数と同じになります。 もう一度リトラクトを展開すると、数が半分になります。
  （つまり、30行の格納-> 10行の展開->クリックの格納-> 10行の格納->クリックの展開-> 3行の展開->クリックの格納-> 3行の格納）。

JSON.parse（JSON.stringify（data））ハックを使用して、別の同じオブジェクトを提供することにより、itemDataをリロードしようとしました。 運がない:-(

高さの計算ミスが疑われます。 この問題を克服するためのアイデアはありますか？

コードサンドボックスの例を教えていただけますか？ お互いに助け合えるように、似たようなことをする必要があります

@vtripolitakis拡張可能な行の例を見つけました。 ディスカッションへのリンクは次の

@carlosagsmendesはこれに感謝しますが、 DynamicSizeListを使用しているため、私のケーススタディは少し異なります:-(

だから私は問題の理由を見つけました：
state.scrollOffsetは負の値をとっていました。

src/DynamicSizeList.jsで、299行目に次のコードを追加する必要があります

if (sizeDeltaForStateUpdate < 0) {
          sizeDeltaForStateUpdate = 0;
        }

うーん...一見、その修正が正しいとは思わない。 サイズデルタは合法的に負の値になる可能性がありますね。

たぶん、 state.scrollOffset値が更新される場所の周りにガード（ Math.max(0, prevState.scrollOffset + sizeDeltaForStateUpdate) ）が必要ですか？

こんにちは、私がケースをデバッグしたとき、 sizeDeltaTotalは負の値を取り、それに応じてsizeDeltaForStateUpdate負にし、状態の更新後に負のstate.scrollOffsetを生成しました。

これは、アイテムを展開および縮小してから、 scrollOffset 0および方向backwardsの先頭までスクロールしたときに発生しました。 それから私が数回拡大したり縮小したりすると、私はネガを手に入れました。
はい、あなたの提案も同様に良いはずです。 〜今すぐテストします。〜正しく動作します。

@marcneanderバージョン1.4.0-alpha.1試す

リストが非表示になっているときにサイズ変更イベントを無視することに関しては、 https：//github.com/piecyk/react-window/commit/acfd88822156611cfd38872acdafbbefd2d0f78fのようになり
@bvaughnどう思いますか？

チャットボックススタイルのアプリに自動スクロールを追加しようとしていますが、この問題が発生しています： DynamicSizeList does not support scrolling to items that have not yet measured. scrollToItem() was called with index 111 but the last measured item was 110.

componentDidUpdate scrollToItem(items.length-1)を呼び出そうとしています

これは意図された動作ですか？

ええ、多分そのようなものは@piecykでうまくいくかもしれません👍

これは意図された動作ですか？

@xaviergmailのようには

ちょっと@bvaughn私はこの問題を脱線させるスパース配列の実装があると言いたかったのです。 Flashが：-1：であることは知っていますが、Flexの最後のバージョンには、実際には非常に優れた仮想化レイアウトエンジンがありました... Flash :-)

LinearLayoutVectorは、単一次元のアイテムインデックスとピクセル位置の間をマッピングするためのスパース配列です。 3つの基本的な操作は次のとおりです。

interface LinearLayoutVector {
   start: (index) => position;
     end: (index) => position;
  indexOf: (position) => index;
}

内部的には、アイテムの位置を格納するために2の累乗でバケットを割り当てます（特定の累乗は、より大きなまたはより小さなアイテムサイズに対応するように調整できます）。 これにより、一定時間のO（1） index -> positionルックアップ、およびposition -> indexルックアップの効率的な線形ブロックスキャンが可能になります。 パディング、ギャップ、デフォルトサイズ、ランダムアクセスの挿入、削除、更新をサポートしています。

約6年前、モバイル用の仮想化UIをたくさん行っていたときに、JSに

数週間前に反応仮想化されたドラフトCellSizeAndPositionManagerの内部を切り替えました。これにより、パフォーマンス/キャッシュの無効化がいくつか解決されました。 ダウンしている場合は、数週間以内に同様のPRをreact-windowに送信させていただきます。

こんにちは@ trxcllnt👋

PRの共有に興味があれば、ぜひご覧ください。 issues/6ブランチ（WIP PR＃102）に対してそれを作りたいと思うでしょう。

一見すると、 linear-layout-vectorはテストが行​​われていないか、使用頻度が高すぎるようには見えないので、最初は少し気が進まないでしょうが、それでも見ていきたいと思います。 また、醜化+縮小化された後、バンドルにどの程度の重みが追加されるかを確認したいと思いますが、あまり多くは追加されないと思います。 😄

@bvaughn汗を

コメントした後、移植したデモがあったことを思い出しました： https ：

@bvaughn過去1年間にissues / 6ブランチで行われたすべての作業に感謝します！
私は現在^1.6.0-alpha.1をテストしており、そのバージョンで本番環境に出荷する予定です。

この問題を見て、ブランチで最新のものを使用している他の人のために、新しいDynamicSizeListを操作するために必要なことを投稿したいと思いました。

上にリンクされたドキュメントとissues / 6ブランチから生成されたドキュメントに従うと、

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

そのため、修正は、テストで行うことを模倣することでした...

import { DynamicSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

// in constructor(props) for handling scrolling
this.listRef = React.createRef();

// in render()
const allItems = [...];
const Renderer = ({ forwardedRef, style, index, ...rest }) => (
  <div ref={forwardedRef} style={style}>
    <MyCoolComponent index={index} otherProps={otherPropsBasedOnAllItems} />
  </div>
);

const RefForwarder = React.forwardRef((props, ref) => (
  <Renderer forwardedRef={ref} {...props} />
));

return <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
  <div style={{ flexGrow: 0, flexShrink: 0, width: '100%', position: 'sticky', top: 0, zIndex: zIndexHideLayers }}>
    <MyCoolComponentThatControlsScrolling listRef={this.listRef} />
  </div>
  <div style={{ flex: 1, width: '100%' }}>
    <AutoSizer>
      {({ height, width }) => (
        <List ref={this.listRef} itemCount={allItems.length} width={width} height={height}>
          {RefForwarder}
        </List>
      )}
    </AutoSizer>
  </div>
</div>;

私の例には、おそらくそのドキュメントページに必要なもの以上のものが含まれていますが、ドキュメントの更新が簡単になることを願っています

ブランチの現在のバージョンに関するフィードバックはありますか？
💯はうまく機能します
🎉すべての作業にもう一度感謝します！

編集： DynamicSizeListは、このライブラリを非常に使いやすくしました。

詳細を共有していただきありがとうございます！ この問題を取り戻すための帯域幅が得られたら、それらを掘り下げます。

このアプローチは、この号の元の提案と一緒に使用できると思います。

アイテムの以前のサイズを使用するのではなく、推定サイズを使用して、誰かがスクロールするときに実際のサイズで調整することができます。 （以前に測定されたサイズの方が正確である可能性が高いという事実を除いて、「以前に測定されたサイズ」と「推定サイズ」の間に重要な違いはないと思います。それでも、これは許容できるトレードオフである可能性があります。以前のものをレンダリングせずにデータ内の任意の場所にジャンプすると、アイテムサイズのキャッシュを維持する必要がなくなります。）

これにより、スクロールアンカーの問題が大幅に簡素化されると思います。 （説明したように）最初のジャンプを実行してから、「前」（上または左）のすべてが正確に推定サイズであると偽ることができます。 次に、スクロールしながら洗練します。

多分うまくいくでしょうか？

@bvaughnこれにより、 @ xaviergmailが対処した問題が修正され、最初はチャットのように「一番下」までスクロールしますか？ 動作しない例のコードサンドボックスを作成しました。 そうでない場合、回避策はありますか？

https://codesandbox.io/s/vr648ywy3

この問題に関するコメントは、トラブルシューティングではなく、APIの議論に焦点を当てたままにしておきましょう。

質問をするためにStackOverflowをお勧めします。

このAPIでresetAfterIndexを公開することは可能ですか？ DynamicSizeListに追加、編集、削除します。少なくとも収集できるものからは、これが高さを修正するために呼び出すメソッドになりますね。

@bvaughnは週末に、アンカーインデックスを使用してアイテムを配置し、リストをスクロールしてユーザーに表示されているものを揃えるというアイデアで遊んでいました...それが機能する可能性があるという第一印象😅簡単にするために、リストはオーバースキャン要素なしでレンダリングされます。キャッシュの動作を変更する必要があります（このwipでは常にクリアされます）...どう思いますか？

pocの実装https://github.com/piecyk/react-window/pull/2/files
これがブランチのビルドを実行するコードサンドボックスです
https://codesandbox.io/s/4x1q1n6nn9

ええと、Chromeのように高速スクロールがこのアプローチを使用している場合、Firefoxはレンダリングに追いつくことができません🤷‍♂️

チャットボックススタイルのアプリに自動スクロールを追加しようとしていますが、この問題が発生しています： DynamicSizeList does not support scrolling to items that have not yet measured. scrollToItem() was called with index 111 but the last measured item was 110.

componentDidUpdate scrollToItem(items.length-1)を呼び出そうとしています

これは意図された動作ですか？

ちょっと遅いですが、私はこの反応フックでその問題を解決しようとしています。

最善の解決策ではありませんが、私はまだそれに取り組んでいます。 たぶん、それをより一般的（そして単純）にしてパッケージを作成するために働くことができますか？

これが現在どのように機能しているかを示すGIF：
https://cl.ly/87ca5ac94deb

たぶん、このチャットのような振る舞いの解決策について話すために、新しい問題を開くことができますか？

ええと、Chromeのように高速スクロールがこのアプローチを使用している場合、Firefoxはレンダリングに追いつくことができません

FirefoxNightlyバージョン68で動作するようです。

@bvaughn InfiniteLoaderおよびAutosizerコンポーネントでDynamicSizeListを使用して、フィードを作成しようとしています。 私はこれまでに見たものが好きです、それを続けてください:)

APIと動作の観点から：

1. FixedSizeListのように、itemKeyコールバックの2番目の引数としてデータオブジェクトを取得できますか？

2. データオブジェクトがフィルタリング/変更されたときに、内部コンテナの高さをリセットできますか？

DynamicSizeListから1.6.0-alpha.1をInfiniteLoaderでしばらく使用していて、うまく機能しています。 素晴らしい機能をありがとう！

ただし、 scrollToItem()を使用する必要があります。 上記のコメントと同様ですが、まだ何も測定されていないため、次のようになります。

DynamicSizeList does not support scrolling to items that yave not yet measured. scrollToItem() was called with index 9 but the last measured item was -1.

長いsetTimeout後で呼び出してみたので、タイミングに関連しているようには見えません。 それで、私は測定を強制できますか？ または、回避策はありますか？

編集：気にしないでください、 initialScrollOffsetは私が必要なことをしました。

findDOMNodeを使用する理由

@nextブランチの型定義は存在しますか？

@WillSquireいいえ、そうではありません。 DefinitelyTypedの@nextタグでそれらをリリースできるかどうかもわかりません（私は間違っているかもしれません）。 また、APIはまだ変更される可能性があるため、このブランチが最終的にマージされ、新しいバージョンがリリースされるまで待つ方がよいと思います。

@bvaughn私はでこれを使用して喜んでてきたdevhubが、私はそれを統合することに投資する前に、あなたはそれが良い形ですでにだか、まだいくつかのブロッカーの問題を持っていると思いますか？

@ brunolemos ＃102の私のtodoリストはかなり正確だと思います。 テストを行って、ターゲットのブラウザに適していると感じた場合は、投稿を続けてください。

私を投稿してください！

〜使ってみましたが、今のところ成功していません。〜

動作しましたが、パフォーマンスは良くありません。 たぶん私のアイテムのレンダリングは高価か他のものです。

https://github.com/devhubapp/devhub/pull/152

コンテナの高さが100％のAutoSizerを使用すると、最新バージョンで問題が発生した可能性があります。

編集：100vhとcalc（）を使用して回避策を見つけることができました

何かが壊れた可能性があります

曖昧すぎて実行可能ではありません。 予想される動作と一緒に再現を共有しますか？

1.6.0-alpha.1のDynamicSizeListを、さまざまなフィルターといくつかの複雑なカードビューで使用しています。 しかし、私たちは高さと幅で包む必要があります。 それは私にとってはうまくいっています。

君たちありがとう

こんにちは、 DynamicSizeList試していますが、すべてのアイテムが重なり合ってレンダリングされています。 レンダリングされたアイテムにstyle属性を渡しますが、 styleログに記録すると、 heightが各アイテム、 topおよびleftに対して未定義であることがわかります。常に0です。
私はここで何を逃しましたか:-)？

@ graphee-gabrielあなたは複製の例を見逃しています。

アイテムを自然なサイズでレンダリングできるようにするために、高さは最初は意図的に指定されていません。

ロジックは理解できましたが、これがアイテムが互いに重なり合ってレンダリングされる理由ではありません。
できるだけ多くのデータを提供します。よくある間違いをしたか、この問題につながる明らかな手順を見逃した可能性があると思いました（スタイルオブジェクトを渡さないなど）。

import React from 'react'
import { DynamicSizeList as List } from 'react-window'

import Layout from '../Layout'
import Text from '../Text'
import withScreenDimensions from '../withScreenDimensions'

class ListView extends React.Component {
  state = {
    availableHeight: 0
  }

  componentDidMount() {
    const checkForHeightChange = () => {
      if (this.containerDiv) {
        const { offsetHeight } = this.containerDiv
        if (this.offsetHeight !== offsetHeight) {
          this.offsetHeight = offsetHeight
          this.setState({ availableHeight: offsetHeight })
        }
      }
    }
    checkForHeightChange()
    this.intervalId = setInterval(checkForHeightChange, 10)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    const {
      data,
      renderItem,
      emptyText,
      dimensions,
    } = this.props
    const { width } = dimensions
    const { availableHeight } = this.state
    return (
      <Layout
        centerVertical
        style={{
          height: '100%',
        }}>
        {data && data.length > 0 ? (
          <div
            style={{
              display: 'flex',
              flex: 1,
              height: '100%',
              backgroundColor: 'red',
              alignItems: 'stretch',
              justifyContent: 'stretch',
            }}
            ref={ref => this.containerDiv = ref}
          >
            <List
              height={availableHeight}
              itemCount={data.length}
              width={width > 800 ? 800 : width}
            >
              {({ index, style }) => {
                console.log('style', style)
                return (
                  <div style={style}>
                    {renderItem({
                      item: data[index], index
                    })}
                  </div>
                )
              }}
            </List>
          </div>
        ) : (
            <Text bold center padding accent>{emptyText}</Text>
          )}
      </Layout>
    )
  }
}


export default withScreenDimensions(ListView)

これを見ることができるコードサンドボックスを共有しますか？

親がレンダリングされるたびに変更されるため、アイテムレンダラーにインライン関数を使用しないことをお勧めします。これは、不要な再マウントが発生するためです。 （これが、すべての例がインライン関数を回避する理由です。）

@ graphee-gabriel私もこれを持っていました、ドキュメントはそれについて言及していませんが、あなたはあなたの行コンポーネントが参照を受け取ることをサポートするようにする必要があります：

Row = React.forwardRef(
      (row, ref) => (
        <div ref={ref} style={row.style}>
          {renderItem({
            item: data[row.index],
            index: row.index,
          })}
        </div>
      ),
    )

こんにちは、どうぞ：

https://codesandbox.io/s/sweet-sea-irxl8?fontsize=14

はい、確かにインライン関数の場合、これは私がreact-windowに移行しようとした非常に古いコードであり、ここでもそれを改善するのに時間がかかりませんでした。
ご意見をいただきありがとうございます。 このサンドボックスで見つけたものを教えてください。

Annnnndサンドボックスを実行する前に@brunolemosメッセージを確認する必要がありました。
これは欠けていたステップであり、私の問題を修正しました、ありがとう！

別の問題が発生しました。@ bvaughnを再現できるようにサンドボックスを更新しました
ここでそれを見つけてください： https ：

これでリストは正常に機能しますが、奇妙なことに、コンテンツとともに大きくなり、二度と縮小することはありません。

意味：

1. 6つのアイテムを表示した場合、最後までスクロールすると、すべて問題ありません。
2. コンテンツを変更して20個のアイテムを表示し、最後までスクロールします。すべて問題ありません。
3. コンテンツを6アイテムに戻し、最後のアイテムまでスクロールしますが、前のコンテンツ（20アイテムのデータセット）から残っているように見える空白をスクロールし続けることができます。

別の問題が発生しました。@ bvaughnを再現できるようにサンドボックスを更新しました
ここでそれを見つけてください： https ：

これでリストは正常に機能しますが、奇妙なことに、コンテンツとともに大きくなり、二度と縮小することはありません。

意味：

1. 6つのアイテムを表示した場合、最後までスクロールすると、すべて問題ありません。
2. コンテンツを変更して20個のアイテムを表示し、最後までスクロールします。すべて問題ありません。
3. コンテンツを6アイテムに戻し、最後のアイテムまでスクロールしますが、前のコンテンツ（20アイテムのデータセット）から残っているように見える空白をスクロールし続けることができます。

私は同じ問題を抱えています

これはまさに私が必要としていたものです。
1.6.0-alpha.1のDynamicSizeListをreact-virtualized-auto-sizerおよびreact-window-infinite-loaderと組み合わせてテストしたところ、非常に良い結果が得られました。
これを前進させるために私が手助けできることはありますか？

こんにちは@ bvaughn 、 https： //github.com/bvaughn/react-window/issues/6#issuecomment -509213284からコードサンドボックスをチェックする時間がありましたか？

こんにちは、チャットアプリにDynamicSizeListを使用しています。
素晴らしい機能をありがとう。

ただし、パフォーマンスの低下と多くのスクリプト処理に問題があります。
スクロールすると、CPUは常に上昇し、多くの場合100％に達します。
解決策について何かアイデアはありますか？

import { useChatList } from '../../../hooks/chat/useChatList';
import LoadingSpinner from '../../../utils/LoadingSpinner';

import dynamic from 'next/dynamic';
import * as React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
// @ts-ignore
import { DynamicSizeList as List } from 'react-window';
import { Message } from 'src/app/typings';

const { useRef, useCallback } = React;

const RowItem = React.memo(
  ({ forwardedRef, style, index, data }: any) => {
    const item = data[index] as Message;
    if (item) {
      return (
        <div id={item.messageId} ref={forwardedRef} style={style}>
          {item.text && item.text.plainText}
        </div>
      );
    }
    return null;
  },
  (prevProps, newProps) => {
    const { index, data } = prevProps;
    const { index: newIndex, data: newData } = newProps;
    let isMemo = true;
    isMemo = isMemo && index === newIndex;
    isMemo = isMemo && data.length === newData.length;
    return isMemo;
  }
);

function ChatList() {
  const listRef = useRef<HTMLInputElement>();

  const { formatMessages: messages, isLoadingMessages } = useChatList();

  const keyCreator = useCallback((index: number) => `ChatList/RowItem/${messages[index].messageId}`, [messages]);

  if (isLoadingMessages && (!messages || messages.length <= 0)) {
    return <LoadingSpinner />;
  }
  return (
    <div style={{ flex: 1, height: '100%', width: '100%' }}>
      <AutoSizer>
        {({ height, width }) => (
          <List
            ref={(lref: HTMLInputElement) => {
              if (lref !== null) {
                listRef.current = lref;
              }
            }}
            itemCount={messages.length}
            itemData={messages}
            itemKey={keyCreator}
            height={height}
            width={width}
            overscanCount={10}
          >
            {React.forwardRef((props, ref) => (
              <RowItem forwardedRef={ref} {...props} />
            ))}
          </List>
        )}
      </AutoSizer>
    </div>
  );
}

export default ChatList;

こんにちは@bvaughn 、
職場のサイズ変更時にアイテムの高さを再計算する正しい方法は何ですか？ 上記のコメントの助けを借りて、私はいくつかのデモを作成していますhttps://codesandbox.io/s/angry-hill-tcy2m
職場の幅をマウスで変更する場合、すべてのアイテムの高さを再計算する必要があります（VariableSizeListコンポーネントの内部の高さキャッシュをクリアしている可能性があります）...

動的リストの解決策はありますか？4時間かけて機能させようとしました
すべてのコメントを読んだ後、私は終わりました😠
あなたたちが何か実用的な解決策を持っているなら、私に提供してください

このプロジェクトには「君たち」はいない。 それは一人で維持されます。

そして、同じ日に複数の問題について同じことについて不平を言ってコメントを残すことは、一種の軽率です。 ぜひ、react-virtualizedをご利用ください。

このブライアンのようなコメントを残して本当に申し訳ありません。 私は後でこの問題を見つけて、それからすべてのコメントを読みました、そして私は他の人が少なくともあなたを助けていると思いました

@ShivamJokerほぼ機能するようになりました。完全に機能するために残された唯一のことは、コンテンツをより少ないアイテムに変更した後、増加し続けるが決して縮小しない全高です。 これが解決されれば、私のユースケースでは完全に機能するように見えます。

@bvaughn https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284のサンドボックスで例を確認する時間がありますか？

=> https://codesandbox.io/s/sweet-sea-irxl8

したがって、短いリストから始まります。

• リストの最後までスクロールダウン
• 上にスクロールしてShow Long Listをクリックします
• 最後までスクロールダウン
• 上にスクロールしてShow Short Listをクリックします
• 最後にもう一度下にスクロールして、短いリストの後に多くの空白スペースが続くことを確認します。

ありがとうございました！

@ShivamJokerほぼ機能するようになりました。完全に機能するために残された唯一のことは、コンテンツをより少ないアイテムに変更した後、増加し続けるが決して縮小しない全高です。 これが解決されれば、私のユースケースでは完全に機能するように見えます。

@ bvaughn ＃6（コメント）のサンドボックスの例を確認する時間がありますか？

=> https://codesandbox.io/s/sweet-sea-irxl8

したがって、短いリストから始まります。

• リストの最後までスクロールダウン
• 上にスクロールしてShow Long Listをクリックします
• 最後までスクロールダウン
• 上にスクロールしてShow Short Listをクリックします
• 最後にもう一度下にスクロールして、短いリストの後に多くの空白スペースが続くことを確認します。

ありがとうございました！

ええ、基本的に内部コンテナはデータのフィルタリング/変更時に高さをリセットする必要があります。

@ShivamJokerほぼ機能するようになりました。完全に機能するために残された唯一のことは、コンテンツをより少ないアイテムに変更した後、増加し続けるが決して縮小しない全高です。 これが解決されれば、私のユースケースでは完全に機能するように見えます。

@ bvaughn ＃6（コメント）のサンドボックスの例を確認する時間がありますか？

=> https://codesandbox.io/s/sweet-sea-irxl8

したがって、短いリストから始まります。

• リストの最後までスクロールダウン
• 上にスクロールしてShow Long Listをクリックします
• 最後までスクロールダウン
• 上にスクロールしてShow Short Listをクリックします
• 最後にもう一度下にスクロールして、短いリストの後に多くの空白スペースが続くことを確認します。

ありがとうございました！

おかげで私はそれが他のユーザーにもうまく機能することを期待して同じことを実装しました
はい、スクロールの高さの問題も見ました

@ graphee-gabrielですが、アプリバーがスクロールダウン時に非表示になっていた問題がもう1つありますが、これは現在発生していません。解決策は何でしょうか。

良い一日。 デモプロジェクトでDinamycSizeListを使用しました。 すべてが順調でしたが、しばらくすると、リストコンポーネントが正しく機能しなくなったことに気づきました。 最初は、react-windowが依存するライブラリだと思いました。 しかし、あなたのデモを見てください
https://react-window-next.now.sh/#/examples/list/dynamic -size
過去には完全に機能していましたが、ほぼ同じ結果に気づきました。 これらのバグの原因を教えてください。

@simeonoff

ええ、基本的に内部コンテナはデータのフィルタリング/変更時に高さをリセットする必要があります。

どうすればよいですか状態の高さを入力しようとしましたが、機能しないようです
解決策はありますか？

@simeonoff

ええ、基本的に内部コンテナはデータのフィルタリング/変更時に高さをリセットする必要があります。

どうすればよいですか状態の高さを入力しようとしましたが、機能しないようです
解決策はありますか？

ライブラリによって内部的に実装する必要があります。

@ShivamJokerほぼ機能するようになりました。完全に機能するために残された唯一のことは、コンテンツをより少ないアイテムに変更した後、増加し続けるが決して縮小しない全高です。 これが解決されれば、私のユースケースでは完全に機能するように見えます。

@ bvaughn ＃6（コメント）のサンドボックスの例を確認する時間がありますか？

=> https://codesandbox.io/s/sweet-sea-irxl8

したがって、短いリストから始まります。

• リストの最後までスクロールダウン
• 上にスクロールしてShow Long Listをクリックします
• 最後までスクロールダウン
• 上にスクロールしてShow Short Listをクリックします
• 最後にもう一度下にスクロールして、短いリストの後に多くの空白スペースが続くことを確認します。

ありがとうございました！

キーを設定して空白を防ぐことができます。
https://codesandbox.io/s/blissful-voice-mzjsc

こんにちは@bvaughnこの素晴らしいプロジェクトに感謝​​します！

必要に応じて、DynamicListsコードにかなりの時間を費やして、制限なしでどこにでもスクロールする方法と、測定されたものとされていないものにスクロールする方法を理解しようとしています。

私はここでなんとかそうすることができましたhttps://github.com/bvaughn/react-window/compare/issues/6...Sauco82：issues / 6 lastMeasuredIndexを取り除き、代わりにitemIsMeasuredアイテムごとにチェックします

私はオープンソースプロジェクトに参加したこともFlowを使用したこともないので、これが役立つか、含める価値があるかどうか、またPRを直接試すか、ここで議論する必要があるかどうかはよくわかりません。

喜んでお手伝いさせていただきますので、何か必要な場合はお知らせください。

ねえ、これははるかに簡単な解決策です（サイズを計算するためにゴースト要素をDOMに追加する必要はありません）：
コードサンドボックス

ねえ、これははるかに簡単な解決策です（サイズを計算するためにゴースト要素をDOMに追加する必要はありません）：
コードサンドボックス

驚くばかり！ わたしにはできる。 良くやった。

@Kashkovskyは、更新された場合にサイズを計算しました
およびitemSizeは1回呼び出します

@ userbq201 @Kashkovsky素晴らしい回避策！ どういうわけか私の場合、それは箱から出して動作しませんでした、私は次のようにChatHistory.jsのコードを変更しなければなりません

    const listRef = useRef(); // added
    const sizeMap = useRef({});
    const setSize = useCallback((index, size) => {
        sizeMap.current = {...sizeMap.current, [index]: size};
        listRef.current.resetAfterIndex(index); // added
    }, []);
    const getSize = useCallback(index => sizeMap.current[index] || 60, []);
    // ...
    <List ref={listRef}

それ以外の場合、すべてのアイテムは同じデフォルトの高さでレンダリングされます。 あなたの場合、それはそのまま動作します、なぜ違いがあるのか​​説明できません...多分@bvaughnはできます。

@bvaughn SSRに対して同様の動作を有効にする必要がある場合はどうなりますか？ その側のヒントはありますか？

@bvaughnそれは私ですか、それともあなたのデモは機能していませんか？

素晴らしい実装@Kashkovsky @ kirill-konshinと@ userbq201 ！

このソリューションでメモ化を使用してどのようにアプローチしますか？

ChatMessageをmemoでareEqualでラップしようとしましたが、メッセージがリストに追加されるたびにReactは各オブジェクトを再レンダリングします。

私の他のFixedSizedListsでは、メモ化はそのmemo / areEqualラッパーで正常に機能しますが、 ref={root}が影響している可能性がありますか？

Reactがコンポーネントを再レンダリングしているかどうかは、

私はここで例をフォークしました： https ：

編集：メモ化を修正しました-最初の機能コンポーネントをメモでラップすることを意図しています-ではなく私がしたように。 誰かがリスト内に複雑なDOM構造を持っている場合（または私のようにビデオをマップする必要がある場合）のメモ化されたソリューションは次のとおりです： https ：

編集2：行の最初のレンダリングは完全に問題ないことがわかりましたが、 resetAfterIndex呼び出しは管理が非常に困難です。 データが変更されます（たとえば、ユーザーが別の会話を選択した場合）。 しかし、本当の問題は、新しいsetSizeが終了する前にresetAfterIndexが実行されているように見えることです。 したがって、キャッシュされたスタイルは正常にクリアされますが、ブラウザがコンテンツのサイズ変更を完了していないため、古いスタイルの新しいキャッシュが再度生成されます。

それが書面で意味があるかどうかはわかりませんが、今のところこれにピンを入れる必要があります。 誰かがコンテンツを動的に変更し、更新された高さスタイルを維持している場合はお知らせください。

私は他にもたくさんのreact-window実装を持っているので、この1つのユースケースにreact-virtualizedを使用するのではなく、ここで良い解決策を見つけたいと思います。

編集3：私はついにセミエレガントな解決策を思いついたので、これが私の最後の編集になります。

1.）itemDataを変更する必要がある場合（つまり、会話が変更されている場合）、全体をアンマウントしますコンポーネントを作成し、新しいitemDataで再マウントします。 これは、setStateコールバックを使用して実行できます。 これにより、データを変更したときに古い高さのスタイルが引き継がれないようになります。

2。） ChatContext介して{sizeMap, setSize, listRef}をChatMessageに渡しました。 そうすれば、単にサイズを盲目的に設定する代わりに、ChatMessageにサイズを設定して古いサイズと比較するように指示できます。 古いサイズが新しいサイズと異なる場合は、呼び出しresetAfterIndexで始まるindexと力のアップデートにtrueを渡します。

したがって、私の新しいChatMessageは次のようになります。

const ChatMessage = ({ message, index }) => {
    const { setSize, sizeMap, listRef } = useContext(ChatContext);
    const root = React.useRef();
    useEffect(() => {
        let oldSize = sizeMap[index];
        let newSize = root.current.getBoundingClientRect().height;
        setSize(index, newSize);
        if(newSize !== oldSize){
            listRef.current.resetAfterIndex(index,true);
        }
    }, [sizeMap, setSize, listRef]);

    return (
        <div ref={root}
             {message.body}
        </div>
    );
};
export default ChatMessage;

3.）基本的にリスナーであるものをに追加しました新しくマウントされるのを待つコンポーネントレンダリングされます。 レンダリングされると、一番下までスクロールします。 これにより、scrollTo関数をcomponentDidMountに直接配置しようとする際の問題が修正されます。これは、そのメソッドが呼び出される前にレンダリングされることがないためです。 そうこのように見えます：

class Chat extends Component {
    constructor(props) {
        super(props);
        this.listRef = createRef();
        this.state = {
            initialScrollComplete: false,
            interval: null
        };
    }

    componentDidMount(){
        // Create interval to check if list is ready. Once ready, scroll to bottom of list.
        this.setState({interval: setInterval(()=>{
            if(this.listRef.current && !this.state.initialScrollComplete){
                this.listRef.current.scrollToItem(this.props.chatHistory.length - 1, "end");
                this.setState({initialScrollComplete: true});
            }
        },25)});
    }

    componentDidUpdate(prevProps, prevState) {

        // Clear interval if scroll has been completed
        if(!prevState.initialScrollComplete && this.state.initialScrollComplete){
            clearInterval(this.state.interval);
            this.setState({interval: null});
        }

        // If new message is transmitted, scroll to bottom
        if(prevProps.chatHistory && this.props.chatHistory && prevProps.chatHistory.length !== this.props.chatHistory.length){
            this.listRef.current.scrollToItem(this.props.chatHistory.length - 1, "end");
        }

    }

    render() {
        return <ChatHistory listRef={this.listRef} chatHistory={this.props.chatHistory}/>;
    }
}

サファリには本当に奇妙な振る舞いがあるようです。

DynamicSizedListdivの高さと行の高さまたはmargin-topが正しく機能しないコンテンツがオーバーラップし始めます。

行のウィンドウ幅/コンテンツが変更されても、新しい高さは再計算されず、コンテンツの新しい高さで機能するように変更されません。

これを修正しているように見えるのは、コンテンツがスクロール可能で、行が表示されなくなるポイントまでスクロールし、そこまでスクロールして戻ると、正しくレンダリングされる場合です。

最初のページの読み込み時にコンテンツが正しくレンダリングされないため、更新しても問題が解決しないようです：/

ChromeやFirefoxなどの他のブラウザでも問題なく動作します。 Safariは素晴らしいですが、残念ながら、アプリはそれを使用する人々のために動作する必要があります。

私は本当にいくつかの助けを使うことができました！

@tastyqbitSafariとInternetExplorerでも同じ問題が発生しました。 あなたが言ったように、展開された行を過ぎてスクロールしてから後ろにスクロールすると、正しくレンダリングできますが、もちろんそれは実際には問題を解決しません。

回避策を見つけたら、私に知らせてください！

@afreix @tastyqbitSafariとInternetExplorerでの問題は、これらのブラウザーでのResizeObserverのサポートの欠如が原因であると確信しています。 私はまさにあなたの問題を抱えていて（スクロールバックで修正しました）、ポリフィルを追加することで解決しました。 互換性テーブルについては、 MDNを参照してください。

ResizeObserverがないと、コンソールに警告が表示されるはずです。

このhttps://codesandbox.io/s/agitated-jennings-o9nn6のようなものはどうですか？

＃102のVariableSizeList + ItemMeasurerの基本的な使用これは非常に単純なアプローチですが、一時的な解決策としては少し機能しているようです（それほど悪くはありません😂）🤔

私たちのチームでは、ランダムなサイズのテキストデータの大規模なリストをレンダリングする必要性に遭遇しました。
私たちにとって、アイテム間を正確にジャンプし、遅れることなくスクロールする機能は必須でした。
かなりのオンライン検索の後、私はあきらめてこのライブラリを書き
それがあなたの何人かの一時的な解決策として役立つことを願っています：smile_cat：

ねえ、
いくつかの作業の後でそれを更新したかったのですが、ライブラリはまともな状態になり、アイテムが初めてレンダリングされた後にサイズが変更されない場合は良い解決策になると思います。

@ gnir-ウィンドウのサイズが変更され、コンテナのサイズが変更されてリストのサイズが変更された場合はどうなりますか？

このスレッドを読んで、幅が変わる可能性のあるアイテムを処理するためのより良い方法があるかもしれないと思います。

ここでの「変数」の定義は、セット全体で変数です。 実際のアイテムのサイズは静的であり、動的ではありません。 テキストが変更された場合、サイズ変更または変更中にサイズが変更される可能性があるため、おそらく動的がより適切な用語です。

これが機能する方法は、親のスクロールを聞くことです。

アルゴリズムは次のように機能します。

• 各アイテムの推定サイズを計算します-これは非常に効率的である必要があります。 完璧である必要はありません。 + -20％で問題ありません。

• ユーザーがスクロールしても変更が表示されないように、表示されているアイテムのみをレンダリングし、さらに20％多くレンダリングします。

• 「高さ」が推定高さに設定されている他のすべての「ゴースト」があります。 それはただの空のdivです。 このようにして、スクロールバーはほぼ右に見えます。

• アイテムは、ビューポートにある場合にのみ表示されます。 それ以外はゴーストアイテムが表示されます。

これの唯一の欠点は、スクロールバーの高さがわずかに変化することです。 これがユーザーの気を散らすかどうかはわかりません。 スクロールリストが大きい場合もあります。 推定サイズがスクロールバーの長さに影響を与えないようにバッファを増減することで、これをだますことができるかもしれません。

@ gnir-ウィンドウのサイズが変更され、コンテナのサイズが変更されてリストのサイズが変更された場合はどうなりますか？

最新バージョン（ 2.2.0 ）の時点で、コンポーネントはリスト全体のサイズ（高さと幅）の変更をサポートしています。

このスレッドを読んで、幅が変わる可能性のあるアイテムを処理するためのより良い方法があるかもしれないと思います。

ここでの「変数」の定義は、セット全体で変数です。 実際のアイテムのサイズは静的であり、動的ではありません。 テキストが変更された場合、サイズ変更または変更中にサイズが変更される可能性があるため、おそらく動的がより適切な用語です。

これが機能する方法は、親のスクロールを聞くことです。

アルゴリズムは次のように機能します。

• 各アイテムの推定サイズを計算します-これは非常に効率的である必要があります。 完璧である必要はありません。 + -20％で問題ありません。
• ユーザーがスクロールしても変更が表示されないように、表示されているアイテムのみをレンダリングし、さらに20％多くレンダリングします。
• 「高さ」が推定高さに設定されている他のすべての「ゴースト」があります。 それはただの空のdivです。 このようにして、スクロールバーはほぼ右に見えます。
• アイテムは、ビューポートにある場合にのみ表示されます。 それ以外はゴーストアイテムが表示されます。

これの唯一の欠点は、スクロールバーの高さがわずかに変化することです。 これがユーザーの気を散らすかどうかはわかりません。 スクロールリストが大きい場合もあります。 推定サイズがスクロールバーの長さに影響を与えないようにバッファを増減することで、これをだますことができるかもしれません。

これはすでに@bvaughnによってreact-virtualized実装されています。 このアプローチの主な欠点は、特定の行へのジャンプがうまく機能せず、上にスクロールすると視覚的なバグが発生することです。

@ gnir-work ah .. ok ...多分、作業を中止して、react-virtualizedを見てみましょう。

スクロールアップの問題は正しいと思いますが、「推定サイズ」を設定して、コンポーネントがマウントされたら実際のサイズに変換することで、これを修正できると思います。

...しかし、もちろん別の問題は動的コンテンツの処理です。 何かが更新されると、コンポーネントの高さが変わります。

推定サイズが機能するよりも正確である場合、たとえば、私はしばらく前に、react-virtualizedを使用して動的な高さの仮想化リストを実装し、推定サイズが正確である限りうまく機能しました。 そうしないと、行にスクロールする機能がアプリを壊してしまいます☹

Mail for Windows10から送信

差出人：ケビンバートン
送信：2020年4月14日火曜日23:07
宛先：bvaughn / react-window
Cc：Nir Geller; 言及する
件名：Re：[bvaughn / react-window]ジャストインタイム測定コンテンツをサポート（＃6）

@ gnir-work ah .. ok ...多分、作業を中止して、react-virtualizedを見てみましょう。
スクロールアップの問題は正しいと思いますが、「推定サイズ」を設定して、コンポーネントがマウントされたら実際のサイズに変換することで、これを修正できると思います。
...しかし、もちろん別の問題は動的コンテンツの処理です。 何かが更新されると、コンポーネントの高さが変わります。
—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、登録を解除してください。

-
このメールは、アバストアンチウイルスソフトウェアによってウイルスがチェックされています。
https://www.avast.com/antivirus

@ gnir-仕事ああ...私は「行にスクロール」機能は必要ないと思います..多分私は間違っていますが。

これはあなたのニーズに十分なはずです😊

Mail for Windows10から送信

差出人：ケビンバートン
送信：2020年4月14日火曜日23:13
宛先：bvaughn / react-window
Cc：Nir Geller; 言及する
件名：Re：[bvaughn / react-window]ジャストインタイム測定コンテンツをサポート（＃6）

@ gnir-仕事ああ...私は「行にスクロール」機能は必要ないと思います..多分私は間違っていますが。
—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、登録を解除してください。

-
このメールは、アバストアンチウイルスソフトウェアによってウイルスがチェックされています。
https://www.avast.com/antivirus

次の場合の回避策として：

• リストの行の高さは、内側のテキストのみに依存します（さらに、寸法が決まっている要素もあります）
• あなたのリストは固定幅です

コンポーネント全体をレンダリングする代わりに、 CanvasRenderingContext2D.measureText（）を使用して行の高さを計算できます：poop：

CodeSandbox

@bvaughn npmで新しいアルファ版を公開する予定はありますか？ 1.6.0-alpha.1以降、更新はありません😕

@bvaughn更新はありますか？ 最近のバージョンで修正されますか？

TypescriptをDynamicSizeList使用したい場合は、モジュールの拡張により、DefinitelyTyped定義からDynamicSizeListするために必要な型を指定できます（昨年このスレッドに投稿されたクエリの回避策）。

プロジェクトに以下を追加します。

import React, { Component } from 'react'

declare module 'react-window' {
  export type DynamicSizeListProps = Omit<FixedSizeListProps, 'itemSize' | 'scrollToItem'>
  export class DynamicSizeList extends Component<DynamicSizeListProps> {}
}

次に、通常どおりインポートします。

import {
  DynamicSizeList,
  DynamicSizeListProps,
} from 'react-window'

// use as normal...

@types/react-window FixedSizeListProps定義では、 @types/react-window最初にインストールする必要があります。

typedefをありがとう、今すぐ追加します！ 私は1年以上prodでDynamicSizeListを使用しています。 現在、このフォークに基づいています： "@john-osullivan/react-window-dynamic-fork": "^1.9.0-alpha.1" （それはまだ最新のものですか？）。 これが実際にリリースされるかどうか/いつリリースされるかについての不確実性のために、私はreact-virtuosoに切り替えようとしました。 しかし、パフォーマンスが低下し、これでスタックしていることがわかりました。

@bvaughnはまだカウパスを舗装し、これをnpmにリリースする時ですか？ 準備ができていないことがまだ心配な場合は、名前をExperimentalDynamicSizeList変更しただけかもしれません。

こんにちはみんな！ あなたの努力とこの素晴らしい図書館に感謝します。 この機能を本当に楽しみにしています！ ただし、この問題に関する情報をREADMEおよびドキュメント/例に追加することをお勧めします。 動的コンテンツが実際にはライブラリでサポートされておらず、固定/既知のサイズのアイテムにのみ役立つことを理解するのにかなりの時間がかかりました。 READMEには、これを追加できるすばらしいFAQセクションがあると思います。

テーブル/グリッド/ツリーを探している場合、これはVariableSizeGrid上に構築されたhttps://autodesk.github.io/react-base-table/examples/dynamic-row-heightsから始めるのが良いでしょう。

@ tony-scio 1.6.0-alpha.1のDynamicSizeListをInfiniteLoaderで使用するための実用的なコードサンドボックスを共有していただけますか？ ありがとう、本当にありがたいです。

誰かがこれをreact-beautiful-dndで動作させるようになりましたか？ ドラッグすると、アイテムが互いにジャンプするように見えます。

誰かがこれをreact-beautiful-dndで動作させるようになりましたか？ ドラッグすると、アイテムが互いにジャンプするように見えます。

私もこの答えを待ちます：D

[助けて]
このリンクに表示するコードはありません：
dynamic-size-list-vertical
そして私はこの能力が必要です。
ありがとう

[助けて]
このリンクに表示するコードはありません：
dynamic-size-list-vertical
そして私はこの能力が必要です。
ありがとう

https://react-window-next.now.sh/#/examples/list/dynamic -size

これに関する更新はありますか？ できる限り似たようなものが必要です（通常は非常に少ないですが、場合によっては多くなる可能性があります）。アイテムの大きなレスポンシブグリッドリストをレンダリングします（アイテムの高さは動的であり、モバイルではさまざまなテキストの折り返しなどによって変化します）。 react-windowがこのユースケースを処理できれば、ゲームチェンジャーになると思います。 そうでない場合、信頼できる代替手段はありますか？

これに関する更新はありますか？ できる限り似たようなものが必要です（通常は非常に少ないですが、場合によっては多くなる可能性があります）。アイテムの大きなレスポンシブグリッドリストをレンダリングします（アイテムの高さは動的であり、モバイルではさまざまなテキストの折り返しなどによって変化します）。 react-windowがこのユースケースを処理できれば、ゲームチェンジャーになると思います。 そうでない場合、信頼できる代替手段はありますか？

@JavaJamieは、特に代替案を求めたためです-virtuosoライブラリには、動的コンテンツを測定するためのサポートが組み込まれています。 免責事項：私はそれの作者です。

@JavaJamieは、特に代替案を求めたためです-virtuosoライブラリには、動的コンテンツを測定するためのサポートが組み込まれています。 免責事項：私はそれの作者です。

react-virtuosoもreact-windowの2倍のサイズです。 依存関係のサイズを常に念頭に置く必要があります。

https://bundlephobia.com/[email protected]
https://bundlephobia.com/[email protected]

私にはこの努力を終える時間もエネルギーもないという事実を受け入れました。 誰かが私が始めたブランチに足を踏み入れて終了したいのであれば、私はあなたの助けを歓迎します。 （これが新しいListおよびGridコンポーネントとしてバージョン2リリースにどのように適合するかについては、問題＃302も参照してください。）

結局、これには、非常にうまく機能する可視性センサーを使用するようなものをゼロから実装することになりました。

それを取り除いて新しいプロジェクトを作成したり、ここに移動したりする場合は、おそらくOSSを使用するか、適切な場所を指定することができます。

1つのトリックは、パフォーマンスを向上させるために「ブロック」を使用することです。 基本的に、各行を取得し、実際に25アイテムのような親ブロックに配置し、必要に応じてそれを交換します。

@burtonatorそれは本当に役に立ちます

DynamicSizeListを使用してreact-selectのバグのない実装を提供できる人はいますか？
私はそれを一緒にうまく機能させることができません。
現在、2つの問題に直面しています（スクリーンショットがないため申し訳ありません）：

1. すべてのアイテムにはstyle={position: absolute, left: 0, top: 0}ありますが、すべてのオプションが互いに重なり合っているため、このスタイルを使用することはできません。
2. スタイルプロップを使用しない場合、リストは適切に表示されますが、少しスクロールすると、オプションが含まれているリストの一部が縮小され、全体の高さは変更されません。 したがって、スクロールすると、実際のオプションのxピクセルと長さ-xピクセルの空白が表示されます。

2つの実用的な例は見つかりませんでした。
Chromeでは1.9.0フォークを使用していることに注意してください。

編集します。 上記の非表示のコメントセクションで答えを見つけました。 https://github.com/bvaughn/react-window/issues/6#issuecomment -509016422

スクロールの問題を単純化する方法の1つは、スクロールがビューポートの高さからおよそ1つ以上離れている場合に、スクロールバーを使用して、ピクセル位置ではなくリスト内のアイテムのインデックスを示すことです。 コンポーネントは、Xピクセルを「下にスクロール」しようとする代わりに、目的のインデックスの周りにアイテムをレンダリングするだけです。 中途半端にアイテムをインデックスN / 2にレンダリングし、下にアイテムをインデックスN-1にレンダリングします。

これにより、コンポーネントがサイズをレンダリングおよび計算するときにスクロールサムが遅れることなく、リストの中央または最後にサムを直接スクロールできます。 現在、非常に長いVariableSizeListコンポーネントの場合、カーソルがスクロールサムの移動よりも速くドラッグするため、一番下までスクロールすることはほぼ不可能です。