React-window: AutoSizer

これをまだコーディングしていない場合。 私はそれを拾うでしょう。 私はreact-measureを試してみるつもりでした。

良い！ Travis（@souporserious）に連絡してください。 彼と私はこれについて少し話していました。

私の最近の考えは、react-windowはAutoSizerコンポーネントを必要としないということです。 代わりに、この目的でreact-measureを使用する方法を文書化することができます。 （軽量のラッパーコンポーネントをリリースすることもできるかもしれませんが、メインライブラリに含めるべきではないと思います。少なくともまだ考えていません。）

分かりました。 しましょう。 react-measureにもう少し慣れたら、彼にメールを送信します。

親ノードを測​​定する方法や、 measureRefを親ノードに渡す方法に興味があります。

私は同じことに興味がありました！ これが彼がそれについて言ったことです：

ああ、私はあなたが今何を意味するのかわかると思います。 ええ、来週レポを更新させてください。新しいAPIがこれをどのように可能にするかをお見せします。 測定値の処理方法をカスタマイズできるすべてのmeasureRefに「式」オプションを提供します。そのため、AutoSizersの場合、親の測定値を調べて変更時に報告するカスタム式を使用できます。 微調整が必​​要かもしれませんが、うまくいくはずです。

これについてTravisと協力するというアイデアが大好きです。なぜなら、（1）これはウィンドウ処理の問題ではないので、このライブラリで所有する必要がないのは良いことです。（2）彼のアプローチはCellMeasurerよりも未来的なもののようです

それは本当に有望に聞こえます！

親ノードでmeasureRefを呼び出すだけのラッパーコンポーネントをテストします。 それでうまくいくのだろうか。

サンドボックスを投稿します

ああ、私のアポストロフィの使用法🤦‍♂️💩

@wuweiweiwuあなたが興味を持っていると聞いてうれしいです！ まだいくつかの新しいコードでリライトPRを更新する必要があります。 明日の夜は少し時間がありますが、それを成し遂げることができるはずです。 ご不明な点がございましたら、どちらかからのフィードバックをお待ちしております。更新され次第、すぐにご連絡いたしますので、良い解決策にたどり着くことができれば幸いです🤞。

@souporserious素晴らしい！ 楽しみにしています。 私はまだボンネットの下でreact-measureにもっと精通する必要があります:)

@bvaughn私はいくつかのハッキーなコードとMeasure https：//codesandbox.io/s/xll21o5lo4のラッパーで機能する概念実証を作成しformulaオプションを好むでしょう

@wuweiweiwuいい仕事!!! それは私が考えていたものと似ています。 ちょっとしたメモですが、 rcタグの下にインストールできる新しいAPIが作品にあります。これは、古いAPIとは少し異なります。 パッケージを追加するときに、codesandboxのドロップダウンでアクセスできます。 parentNodeをつかんで、それをmeasureRef渡すというアイデアが好きです。 たぶん、 react-measureを微調整して、作業を簡単にすることができます🤔。

ここにも簡単なサンドボックスをまとめました： https ：

ただし、これは2つのノードをラップしているため、最も優れたAPIではありません。 formulaオプションで私が予測している1つの問題は、変更について親のノードを監視しないことです。これは、親のディメンションを取得するためにのみ使用できます...したがって、これが機能する他の方法は次のとおりです。 APIを渡すことによって。 このようなことについて、あなたとあなたの両方がどのように感じているのか疑問に思います👇

<AutoSizer>
  {({ bindParent, bindChild, width, height }) => (
    <div {...bindParent}>
      <div {...bindChild}>
        {width} x {height}
      </div>
    </div>
  )}
</AutoSizer>

それは私のお気に入りではありませんが😏だから、 parentNodeをつかんで、それをmeasureRef渡すことで、 react-measure微調整するのが最善かもしれません。

この例^がmeasureRefを渡すこととどのように違うのかわかりませんか？ どちらの場合も、 AutoSizerは_parent_ではなく_child_を測定しています。 したがって、追加のパラメータを通過することを心配する必要があります。

私にとって不幸に思われる理由は次のとおりです。

• 子関数でより多くのパラメーターを処理する必要があります。
• AutoSizerは、たとえばflex: 1 1 autoなどのスタイルをトップレベルのラッパーに設定する必要があるため、再利用性が低くなります。 （これをフレックスコンテナの外で使用したい場合はどうなりますか？）
• これは、内部のegリストへの参照を取得するプロセスを複雑にします。 （新しいforwardRef APIを使用する必要がありますが、16.3以上に制限されます。）

ええ、それは私が考えていたものと似ています。 私はparentNodeアプローチに固執すると思います。 AutoSizerような場合、 react-measureでそれを行うためのより簡単な命令型の方法を追加できるかもしれません。 今夜、いくつかのことをいじって、あなたに戻ります。

@souporseriousすごい！ 私も最新の状態に保ってください:)

@vx/responsiveにはParentSizeコンポーネントがあり、これはResizeオブザーバー仕様の軽量ラッパーでもありますが、 react-measureの書き直しを検討しており、 @ hshoffとの採用について検討しています。 また、ツールチップなどのバウンディングボックスでうまく機能することを確認する必要があります。

私はreact-virtualizedのAutoSizerと@vx/respnosiveのParentSize両方をmui-tableコンポーネントで使用し、成功を収めています。 私は現在、いくつかの非オープンソースコードでParentSizeを使用していますが、Flexboxのスタイル設定とサイズ変更に問題がありました（通常は大きい方が機能します）。

ねえ@techniqはあなたがreact-measure検討していると聞いて大好きです！ 申し訳ありませんが、私は書き直しを怠っています。 私は私の主な仕事でとても忙しかったです、私はそれを押し続けています😞。 でも、まとめることが私の次の優先事項です。 私たちはツールチップやポップオーバーのために仕事をしている私のチームのUIキットでそれを使用しているので、うまくいけばあなたのニーズにうまく翻訳されるはずです。

インスピレーションを得るために、過去にParentSizeコンポーネントを見てきました。 興味があれば、新しいreact-measureバージョンが出たら、PRして測定部分に使うことができます。

@souporserious PRは、時間があれば素晴らしいでしょう。

（HOCの代わりに）レンダープロップを使用するために、より多くのコンポーネントを移植することに関して、半関連の問題があります。 ParentSizeはしばらく前に移植されました（HOCはまだ利用可能です）が、問題にリストされているものは関連しています（ ScreenSize =親としてのウィンドウ/ビューポート、バウンディングボックスの処理、すべてチャートのサイズとツールチップに関連しています）。

あなたの請求書支払いの仕事を最初に置くことを完全に理解してください、私は同じ船に乗っています😉（私がオープンソースのためのより多くの時間を持っていればいいのですが、現在の仕事はタスクを達成するためにそれを使用する以外にそれに取り組むことを直接サポートしていません）。

今のところ、私は、スタンドアロン版の公開しているAutoSizerからコンポーネントを反応させ、仮想化、などの反応-仮想化-オートサイザーを。

AutosizerとVariableSizeListに問題があると思います。
スクロールを検出するためのHOCコンポーネントを作成しましたが、オートサイザーを使用すると、スクロールイベントハンドラーがトリガーされません。 なにか提案を ？

const Example = () => (
<div className={parentAutosizer}>
  <AutoSizer>
      {({height, width}) => (
    <List
        height={150}
        itemCount={1000}
        itemSize={getItemSize}
        width={300}
     >
       {Row}
      </List>
      )}
    </AutoSizer>
  </div>
);

export const WindowScroll(Example)

そしてスタイルはそれらです

parentAutosizer: {
    position: 'absolute',
    top: 0
    bottom: 0
    left: '0',
    right: '0'
  }

@MatteoGioioso問題はWindowScrollHOCの中に隠されていると思います。 問題のあるcodesandboxがなければ、私たちは良い助けを提供することはできません。

@TrySound

私はそうは思わない。 オートサイザーを使用せずに高さと幅を手動で設定すると、WindowScrollは正常に機能します。
とにかく、私はそれをコードサンドボックスで明日複製しようとします。
ありがとう

ねえ@ MatteoGioioso👋

AutoSizer問題が発生しているとのことで、ご不便をおかけしております。 別の問題を提出することをお勧めします（この問題はドキュメントに関するものであるため）_しかし_完全な再現ケース（ WindowScroll HOCを含む）を提供しない限り、問題を作成しないでください。見えないコードで何がうまくいかないのかを推測します。

@bvaughnわかりました、やります=）

私はantDのヘビーユーザーでは長い間仮想化を

私は彼らを助けたいのですが、私が着手する前に、オートサイザーで反応ウィンドウを使用するためのあなたの現在の推奨事項は何であるか疑問に思っていました、あなたがメディアの反応ウィンドウで使用するために擁護しているのは反応仮想化自動サイザーです長期的には？

はい、標準のResizeObservableベースのコンポーネントが存在するまで/存在しない限り、私はreact-virtualized-auto-sizer自分で使用しています。

（ sooporserious / react-measureは注意をわかりません。）

react-measureフックバージョンをリリースする予定です。これは、コンポーネントの自動サイズ設定に少し適しています。

私は現在、Reactの現在のアルファ版でこのようなものを利用しています。
コンポーネント階層に依存するのではなく、追跡したい要素サイズを開発者が自由に使えるようにするため、refアプローチが好きです。

import { useState, useEffect, Ref } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

const useAutoresize = (elementRef: Ref) => {
  const [{ width, height }, setMeasurements] = useState({ width: 0, height: 0 });
  const observer = new ResizeObserver(([{ contentRect }]) => {
    setMeasurements({ width: contentRect.width, height: contentRect.height });
  });
  useEffect(
    () => {
      observer.observe(elementRef.current);
      return () => observer.disconnect();
    },
    [elementRef]
  );
  return { width, height };
};

export default useAutoresize;

私はおそらくreact-windowにAutoSizerを実装しようとしていますが、他の誰かがそれに取り組みたいと思ったら、私は何も約束することはできません

react-virtualized-auto- sizer 、 とは異なる方法で何をする予定ですか？

私は数年前にReact用の非常に軽量な測定ライブラリ（依存関係のない400バイト）をリリースしました。これは非常にうまく機能します（ x ）。

これを使用してAutoSizerコンポーネントを作成したいので、 react-windowと一緒に出荷するのが理にかなっていると思います（主に、最終的なgzip圧縮されたバンドルサイズに1kbを超えて追加されないためですがは仮想リストユーザーの99％にとって必須の機能です）が、スタンドアロンライブラリとして優れていると思われる場合は、その方法も使用します。

具体的には、各セルコンポーネントにupdateCellSize関数を提供して、サイズの更新を簡単にしたいです。 これは、仮想リストコンポーネントの内部で使用するアプローチであり、開発者にとって非常に使いやすいことが証明されています。

それが理にかなっている場合は私に知らせてください。

基本のreact-windowライブラリ（自動サイザーなどを含む）に、特にウィンドウ処理に関するもの以外のものを追加したくないと思います。 アドオンパッケージにすべきだと思います。

updateCellSizeをどのように使用しているか、またこのようなライブラリでどのように使用されているかについて詳しく知りたいと思います。

updateCellSizeをどのように使用しているか、およびこのようなライブラリでどのように使用されているかについて詳しく知りたいと思います。

これは、内部で使用するAPIのように見えます。

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style, updateCellSize }) => {
  const [isOpen, setOpen] = useState(false);

  return (
    <div style={style} tabIndex={0} onClick={() => {
      setOpen(isOpen => !isOpen);
      updateCellSize();
    }}>
      Row {index}
      {isOpen && 'Lorem lipsum dolor sit amet, the quick brown fox jumps over the lazy dog, woff.}
    </div>;
  }
}

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

それは完全な例ではないと思います。 updateCellSizeとは何ですか？ それが呼び出されたときにそれは何をしますか？ 行が固定サイズ（35px）の場合、そもそもなぜそれが必要なのですか？

@bvaughn isOpen状態は、 divのサイズを拡張する可能性があります（ええ、例はそれほど明確ではなかったかもしれません）。

updateCellSizeは、 cache.clear(index, 0) （ indexはセルインデックス）とforceUpdateGrid （実際に必要かどうかわからない場合でも）を実行するだけです。

isOpen状態は、 divのサイズを拡張する可能性があります

FixedSizeListはこれをサポートしません。 すべての行は固定サイズです–上記の例では、35ピクセルです。 たぶんあなたはVariableSizeListを使っていますか？

@bvaughnええ、今はreact-virtualizedを使用しています。 切り替えられるようにここで貢献したかったのです。 しかし、私は頭の中でいくつかの混乱があると思います😄

分かりました。 ええ、 VariableSizeListはreact-virtualizedのように機能します。 それはあなたのために働くはずです。

とりあえず、READMEを更新して、 react-virtualized-auto-sizerを使用したソリューションを文書化しました。 その解決策は十分に良いので、私は今のところこの問題を閉じるつもりです。 それでも、 ResizeObserver基づいたアプローチを調べて、話し合うことができてうれしいです。

react-window可変サイズグリッドで使用すると自動サイザーに問題があります。可変サイズグリッドでは正しく機能しません。 可変サイズグリッドのオートサイザーで使用したソリューションまたは例をいくつか提供してください。

前もって感謝します

@ sgupta317react -virtualized-auto-

<AutoSizer />は、その親要素の高さを継承します。

解決策： heightが100vH設定され、 positionがabsolute設定されているdivでラップするだけです。

@bvaughn React-windowリストを使用すると、2つのスクロールバーが表示されます。 react-virualizedリストでは、autoheight = trueを使用することでこれを回避できます。 Reactウィンドウで2つのスクロールバーを回避する方法を教えてください。
これは参考のために私のコードスニペットです。

<WindowScroller>
            {({ height }) => (
                <AutoSizer disableHeight>
                    {({width}) => (
                        <List
                            width={width}
                            height={height}
                            itemCount={logFile.length}
                            itemSize={120}
                            overscanCount={10}
                        >
                            {({index,style}) => (
                                <div>
                                    <div style={style} className="post">
                                        <h3>{`${logFile[index].id}:-${logFile[index].first_name}-${logFile[index].last_name}`}</h3>
                                        <p>{logFile[index].timestamp}</p>
                                    </div>
                                </div>)}
                        </List>
                    )}
                </AutoSizer>
            )}
</WindowScroller>

祖先のDOM要素の1つにoverflow: hiddenします。 それが原因である可能性があります。

Resize Observerベースのオートサイザーを使用しているRE。この例に基づいた単純なフックを使用して、これを機能させています。 これまでのところうまく機能しているようです:)