React-window: Unterstützung von Just-in-Time-Messinhalten

Work in Progress für MVP verfügbar unter https://github.com/bvaughn/react-window/compare/master...issues/6

Ich verwende dies innerhalb von Mui-Downshift und verwende derzeit immer noch UNSAFE_componentWillReceiveProps , obwohl ich vorhabe, in naher Zukunft zu versuchen, auf react-window zu portieren (sobald die Höhe des dynamischen Inhalts verfügbar ist).

Ist dies ein wiederverwendbarer Mechanismus in UITableView unter IOS?

@luoboding Ich verstehe deine Frage nicht. Könnten Sie näher darauf eingehen?

@bvaughn sorry, mein Freund, mein Englisch ist nicht sehr gut.

Ich habe ein Problem in meinem Projekt, ich habe Tausende von Optionen im Auswahlelement, es wird sehr langsam und blockiert beim Neuladen der Seite, ich habe versucht, eine Komponente zu schreiben, um es besser zu machen, ich war ein IOS-Entwickler, ich kenne einen wiederverwendbaren Mechanismus in UITableView in IOS: Wenn ich ein 500px-Höhenauswahlelement benötige, konfiguriere ich die Höhe des Optionselements auf 100px, sodass ich nur die Anzahl der Optionselemente (Math.floor (500/100)) und die Kapazität der Warteschlange (aktuell angezeigte Datenquellenwarteschlange) erstellen muss ), wenn ich ein ausgewähltes Element nach oben oder unten scrolle, drücke oder platziere es einfach in der Warteschlange, um es erneut zu rendern.

Ich möchte ein Reaktionsfenster in mein Projekt importieren. Funktioniert es wie erwähnt?

Was Sie beschreiben, ist, wie das Reaktionsfenster (und das Fenster oder das Okklusions-Keulen im Allgemeinen) funktioniert. Es hat jedoch nicht wirklich mit diesem Problem zu tun. Hierbei handelt es sich um eine Just-in-Time-Messung des Fensterinhalts. In Ihrem Fall haben Objekte eine feste Höhe. Sie können also die Komponente FixedSizeList : https://react-window.now.sh/#/examples/list/fixed -size

Schön zu sehen, dass die Verankerung im Reaktionsfenster nativ angesprochen wird.

Übrigens, tut mir leid, wenn ich die Messlatte in Diagrammen etwas zu hoch gelegt habe… 😅

@bvaughn Wann wirst du diese Funktion veröffentlichen

Ich habe 1.0.0 ohne diese Funktionalität veröffentlicht, weil ich Probleme habe, die Zeit (und Energie) zu finden, um dies jetzt zu beenden. Planen Sie noch, es in Zukunft hinzuzufügen. Keine Schätzung wann.

Es sieht so aus, als würde Polymers "Eisenliste" eine ähnliche Technik verwenden wie die, die ich hier vorschlage: https://github.com/domenic/infinite-list-study-group/blob/master/studies/Polymer-iron-list.md #virtual -list-sizing

Dies wäre sehr nützlich für uns. Im Moment scheint es so, als müssten wir CSS mit der Komponentenlogik synchronisieren, die die Höhenberechnung dupliziert, um sie an die virtuelle Liste zu übergeben.

@kevinder Kannst du uns Messinhalte adressierst? Danke im Voraus

@carlosagsmendes nicht sicher, ob dies helfen wird, aber hier ist, was ich tue, wenn ich dies zum Anzeigen des Chat-Verlaufs verwende:

1.) Erstellen Sie im Konstruktor eine Referenz für die Liste und für meine ChatHistory -Komponente:

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

Ich übergebe dann die Refs an die ChatHistory die für das Rendern der Liste verantwortlich sind

2.) In componentDidMount der übergeordneten Komponente verwende ich den ChatHistory ref, um die Höhe des Elements zu ermitteln:

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

3.) In der übergeordneten Komponente behalte ich ein Array in seinem Zustand mit den Chathistory-Details. Wenn ich diesem Array ein neues Element hinzufüge, gehe ich folgendermaßen vor:

  // 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 basiert auf https://github.com/schickling/calculate-size, aber ich habe es geändert, um das Akzeptieren eines Klassennamens zu unterstützen. Diese Klasse ist dieselbe, die als Container für die Anzeige der einzelnen Nachrichten verwendet wird

Ich bin mir sicher, dass es einen besseren Weg gibt, dies zu erreichen, aber es scheint ziemlich schnell zu sein und ich habe noch keine Probleme festgestellt

@osdlge : ansehen könnte - wie Code Sandbox (oder ähnliches)?

@bvaughn sicher, ich habe die relevanten Teile meines Codes in https://codesandbox.io/s/5z282z7q1l extrahiert

Ich danke Ihnen für das Teilen! 😄

Ich habe einige laufende Arbeiten zu einem ersten Ansatz für träge gemessene Inhalte in einem Zweig namens issue / 6 vorangetrieben

Ich habe auch eine Demo bereitgestellt:
https://react-window-next.now.sh/#/examples/list/dynamic -size

Sehr cool.

Ich versuche immer noch, die allgemeinen Probleme beim unendlichen Scrollen zu verstehen, während ich die Ausgabe / 6-Zweigquelle und diese Diskussion durchlaufe. Die folgende Frage mag also keinen Sinn ergeben, aber hier geht es weiter, da ich dies wirklich gerne weiter verstehen würde:

Bezieht sich die obige Erwähnung von "Bildlaufanker" auf die Bildlaufverankerung als eine Technik wie im verlinkten Artikel oder in der CSS-Bildlaufverankerungsspezifikation ?

Danke im Voraus

Es hängt tangential mit Ihrem ersten Link zusammen, aber nicht mit dem zweiten. Es ist nur ein Begriff, den ich für das Problem gewählt habe, weil er für mich sinnvoll war und nicht, weil er mit einer anderen Spezifikation oder einem anderen Vorschlag zusammenhängt.

Ich habe auch eine Vorabversion von React-Window für NPM als "next" veröffentlicht (z. B. yarn add react-window@next ).

Sie können damit herumspielen, indem Sie diese Code-Sandbox gabeln:
https://codesandbox.io/s/5x8vlm0o7n

Ich habe es gerade ausprobiert. Ich habe 10000 Absätze ausprobiert und versucht, bis zum Ende zu springen. Es war ruckartig.
Wenn ich es richtig verstanden habe, hätte es nur die Zeilen messen sollen, die am Ende geschätzt werden, und daher sofort zum Ende springen sollen. Ist das richtig?

Am 12. Oktober 2018, um 12:53 Uhr, schrieb Brian Vaughn [email protected] :

Ich habe auch eine Vorabversion von React-Window für NPM als "next" veröffentlicht (z. B. Garn hinzufügen React-Window @ next).

Sie können damit herumspielen, indem Sie diese Code-Sandbox gabeln:
https://codesandbox.io/s/5x8vlm0o7n https://codesandbox.io/s/5x8vlm0o7n
- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555 an oder schalten Sie den Thread https://github.com/notifications/unsubscribe-auth/ stumm.

Nein, der erste Zweig, den ich gepusht habe, implementiert den Algorithmus nicht
in dieser Ausgabe beschrieben. Es ist ein naiverer Ansatz als erforderlich
Messen früherer Inhalte vor dem Rendern späterer Inhalte.

Entschuldigung für die Verwirrung!

Am Freitag, den 12. Oktober 2018 um 18:34 Uhr schrieb akraines [email protected] :

Ich habe es gerade ausprobiert. Ich habe 10000 Absätze ausprobiert und versucht, zum zu springen
Ende. Es war ruckartig.
Wenn ich es richtig verstanden habe, hätte es nur die geschätzten Zeilen messen sollen
am ende zu sein und deshalb sollte es sofort zum gesprungen sein
Ende. Ist das richtig?

Am 12. Oktober 2018, um 12:53 Uhr, schrieb Brian Vaughn [email protected] :

Ich habe auch eine Pre-Release-Version von React-Window für NPM als veröffentlicht
"next" (zB Garn hinzufügen React-Window @ next).

Sie können damit herumspielen, indem Sie diese Code-Sandbox gabeln:
https://codesandbox.io/s/5x8vlm0o7n < https://codesandbox.io/s/5x8vlm0o7n

- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail und sehen Sie sie sich auf GitHub <an
https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555>,
oder schalten Sie den Thread stumm <
https://github.com/notifications/unsubscribe-auth/AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P
.

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/bvaughn/react-window/issues/6#issuecomment-429282228 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AABznR5R1N0ErukleIfvaLQORF_NECgRks5ukHBHgaJpZM4UTb3P
.

Hallo,
Ich wollte fragen, ob es eine Schätzung für eine offizielle Veröffentlichung gibt.

Mein Team verwendet react-virtualized für ein neues Projekt, das wir gestartet haben. Wir benötigen jedoch die Funktionalität, nach oben zu scrollen und zu einem bestimmten Zeilenindex zu springen (da Sie davon ausgehen können, dass unsere Zeilen dynamischen Inhalt haben, Bilder und andere sich ändernde Inhalte enthalten).

Würden Sie empfehlen, in der Alpha-Version auf react-window migrieren? Oder sollten wir auf eine offizielle Veröffentlichung warten?

Auch wenn es eine Möglichkeit gibt, zur Fertigstellung dieser Funktion beizutragen, würde ich gerne helfen 😄

Leider kann ich mich im Moment nicht auf einen Release-Zeitplan festlegen, da ich nicht viele Tests durchgeführt habe und nicht weiß, auf welche Probleme ich stoßen werde (oder wie lange die Behebung dauern wird) Sie).

Wenn Sie einen Beitrag leisten möchten, besteht eine Möglichkeit darin, die Alpha-Version zu testen und mich wissen zu lassen, wie gut sie funktioniert und ob Sie Fehler finden.

Ich werde mich wahrscheinlich bald mehr darauf konzentrieren, aber ich kann nicht sagen, wie schnell. Besonders für die nächsten ein oder zwei Wochen bin ich von React conf abgelenkt und bereite die 16.6-Version vor.

@bvaughn tolle Arbeit 👏 Endlich etwas Zeit zum Herumspielen. 🕹

Es sieht so aus, als müssten wir einige Änderungen vornehmen, wenn wir eine Liste mit display: none ausblenden. Sie haben beispielsweise eine Seite mit zwei Registerkarten und möchten zwischen diesen wechseln, ohne Ihren aktuellen Status (Bildlaufposition usw.) zu verlieren. Dies ist jedoch kein seltener Anwendungsfall .

Einfache Code-Sandbox, die das Problem darstellt:
https://codesandbox.io/s/p7vq18wmjq

Es passiert, weil alle Kinder offsetHeight === 0 haben, wenn wir die Anzeige none auslösen
resize beobachtet kiks in und aktualisiert die neuen Werte. react-window sollte sich nicht um diese Situationen kümmern, wenn der Anrufer sich entschied, sie auszublenden. Basic sollte sie durch Blockieren von handleNewMeasurements

wenn diese Zeile
https://github.com/bvaughn/react-window/blob/issues/6/src/DynamicSizeList.js#L443
würde sich ändern zu

handleNewMeasurements: instance._handleNewMeasurements

dann können wir die Standardlogik überschreiben

let _handleNewMeasurements

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

Ich habe ein Update für diesen Zweig veröffentlicht (und ein neues @next -Tag für NPM veröffentlicht), mit dem der Fehler beim reibungslosen Scrollen in Firefox behoben wird, indem margin-top , um Größenänderungen während des Bildlaufs zu berücksichtigen. Es ist komplizierter als ich es gerne hätte, aber ich kenne im Moment keinen besseren Weg, um damit umzugehen. (Ich muss diesen Ansatz noch weiter testen, da ich denke, dass er in extremen Fällen immer noch Ecken und Kanten aufweist.)

Ich freue mich über das Feedback oben, @piecyk. Ich hatte noch keine Zeit, mich damit zu beschäftigen. (Dies ist im Moment immer noch nur ein Nebenprojekt für mich.)

Scheint, als könnte ich den Margin-Hack zumindest zugunsten von scrollBy für Firefox entfernen. Sie müssen jedoch zuerst IE und Edge testen. Sie können ihre eigenen Herausforderungen haben.

Yeah @bvaughn, ich weiß, großartige Arbeit. Ich weiß nicht, wie du die Zeit findest! »Ein großes Lob an Sie!

Aber kehren wir zum Problem zurück, wenn sich die Liste in einem DOM-Element befindet, das mit der Anzeige none ausgeblendet ist. Grundsätzlich müssen wir überprüfen, ob der Wrapper Höhe und Breite hat, wenn nicht, möchten wir nicht mit dem Rendern beginnen (aktuell wird versucht, es zu rendern ganze Liste) Ich werde morgen versuchen, das Problem zu beheben (habe etwas versteckt)

Jep. Ich verstehe den Kern des Problems, das Sie beschreiben. Ich mag die Idee nicht, sie zu umgehen, indem ich mehr Instanzmethoden überschreibe / mit Affen-Patches, also möchte ich zuerst etwas mehr darüber nachdenken.

Scheint, als ob das @ next- Paket kaputt ist?

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

Ich weiß nicht, ob dies der richtige Ort ist, um eine Frage zu hinterlassen. Entschuldigen Sie mich, wenn ich falsch liege. Also, kurz gesagt:

• Ich habe DynamicSizeList zusammen mit AutoResizer und im Allgemeinen funktioniert es gut. Ein großes Lob!
• Ich wurde gebeten, Zeilen einzuführen, deren Inhalt erweitert werden kann (Hinzufügen eines zusätzlichen Divs mit zusätzlichen Informationen) und zurückgezogen werden kann.
• Ich habe diesen Zeilen auch (über Redux) eine Requisite hinzugefügt, die auf globale Aktionen zum Erweitern / Zurückziehen wartet.
• Lustiges Zeug fängt an. Ich klicke auf Erweitern / Zurückziehen und alles sieht gut aus!
• Wenn ich ein wenig scrolle und dann alle Zeilen erweitere / zurückziehe, entspricht die Anzahl der zurückgezogenen Zeilen der Anzahl der erweiterten Zeilen. Wenn ich das Zurückziehen wieder ausdehne, geht die Zahl auf die Hälfte und so weiter.
  (dh 30 Zeilen eingefahren -> 10 erweitert -> Klicken Sie auf Zurückziehen -> 10 Zeilen eingefahren -> Klicken Sie auf Erweitern -> 3 Zeilen erweitert -> Klicken Sie auf Zurückziehen -> 3 Zeilen eingefahren).

Ich habe versucht, die itemData neu zu laden, indem ich ein anderes, aber dasselbe Objekt mit dem Hack JSON.parse (JSON.stringify (data)) versehen habe. Kein Glück :-(

Ich vermute eine Fehleinschätzung der Höhe. Irgendeine Idee, um dieses Problem zu lösen?

Könnten Sie ein Codesandbox-Beispiel teilen? Ich muss etwas Ähnliches tun, damit wir uns vielleicht gegenseitig helfen können

@vtripolitakis Ich habe gerade ein Beispiel mit erweiterbaren Zeilen gefunden . Hier ist der Link zur Diskussion

@carlosagsmendes danke dafür, aber meine Fallstudie ist etwas anders, da ich die DynamicSizeList :-( verwende

Also habe ich den Grund des Problems gefunden:
state.scrollOffset nahm negative Werte an.

Auf src/DynamicSizeList.js wir den folgenden Code in Zeile 299 hinzufügen

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

Hm ... Ich würde nicht erwarten, dass dieses Update auf einen Blick richtig ist. Ein Größendelta könnte zu Recht negativ sein, oder?

Vielleicht sollten wir einen Wachmann ( Math.max(0, prevState.scrollOffset + sizeDeltaForStateUpdate) ) haben, um den der state.scrollOffset aktualisiert wird?

Hallo, als ich meinen Fall debuggte, nahm sizeDeltaTotal negative Werte und machte dementsprechend sizeDeltaForStateUpdate negativ, was nach der Statusaktualisierung zu einem negativen state.scrollOffset .

Dies geschah, als ich Elemente vergrößerte und zurückzog und dann mit scrollOffset 0 und der Richtung backwards nach oben scrollte. Wenn ich dann ein paar Mal aus- und einfahre, bekomme ich die Negative.
Ja, Ihr Vorschlag sollte gleich gut sein. ~ Teste es jetzt. ~ Funktioniert richtig.

@marcneander versuchen Version 1.4.0-alpha.1

In Bezug auf das Ignorieren von Größenänderungsereignissen, wenn die Liste ausgeblendet ist, ist dies möglicherweise https://github.com/piecyk/react-window/commit/acfd88822156611cfd38872acdafbbefd2d0f78f
@bvaughn was denkst du?

Ich versuche, in einer App im Chatbox-Stil einen automatischen Bildlauf hinzuzufügen, und es tritt dieses Problem auf: 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.

Ich versuche, scrollToItem(items.length-1) in componentDidUpdate anzurufen

Ist das beabsichtigtes Verhalten?

Ja, vielleicht könnte so etwas @piecyk

Ist das beabsichtigtes Verhalten?

Klingt nicht so @xaviergmail , nein. Vielleicht ein Fehler.

hey @bvaughn Ich möchte dieses Problem nicht entgleisen, aber ich wollte mich spärliche Array-Implementierung aus den Flex 4 DataGrid-Interna gibt, die hier möglicherweise helfen kann. Ich weiß, dass Flash: -1: ist, aber die letzte Version von Flex hatte tatsächlich eine ziemlich großartige virtualisierte Layout-Engine ... weil Flash :-)

Der LinearLayoutVector ist ein spärliches Array für die Zuordnung zwischen Elementindizes und Pixelpositionen in einer einzelnen Dimension. Die drei Grundoperationen sind:

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

Intern werden Eimer mit einer Potenz von 2 zum Speichern von Artikelpositionen zugewiesen (die spezifische Leistung kann angepasst werden, um größere oder kleinere Artikelgrößen besser aufnehmen zu können). Dies ermöglicht zeitkonstante O (1) index -> position Lookups und einen effizienten linearen Block-Scan für position -> index Lookups. Es unterstützt Auffüllen, Lücken, Standardgrößen sowie das Einfügen, Entfernen und Aktualisieren mit wahlfreiem Zugriff.

Ich habe es vor ungefähr 6 Jahren

Ich habe vor ein paar Wochen einen PR- Entwurf CellSizeAndPositionManager mit dem LLV austauschte und ein paar Probleme mit der Perf / Cache-Invalidierung löste. Wenn Sie nicht da sind, würde ich gerne in den nächsten Wochen eine ähnliche PR bei react-window einreichen.

Hallo @trxcllnt 👋

Wenn Sie daran interessiert sind, eine PR zu teilen, würde ich gerne einen Blick darauf werfen. Sie möchten es gegen den Zweig issues/6 (WIP PR # 102) schaffen.

Auf den ersten Blick sieht linear-layout-vector nicht so aus, als ob es irgendwelche Tests gibt oder zu stark genutzt wird. Ich hätte also ein wenig anfängliche Zurückhaltung, wäre aber trotzdem bereit, einen Blick darauf zu werfen. Ich möchte auch sehen, wie viel Gewicht es einem Bündel hinzufügt, nachdem es hässlich + verkleinert wurde, aber ich würde nicht erwarten, dass es zu viel hinzufügt. 😄

@bvaughn kein Schweiß, ich verstehe total. Es war eine Sache, die ich vor Jahren über Weihnachten IIRC gemacht habe. Ich werde es aufräumen und sicherstellen, dass es mit einer vollständigen Testsuite landet. Machen Sie sich auch keine Sorgen über eine zusätzliche Abhängigkeit. Es ist so eine kleine Klasse, ich bin glücklich, sie direkt beizutragen.

Nachdem ich einen Kommentar abgegeben hatte, fiel mir ein, dass ich die Demo hatte, für die ich den Port erstellt hatte: https://github.com/trxcllnt/virt-list. Besuchen Sie diese GH-Seiten-Website und werfen Sie die Filmliste nach links und rechts (dies stand im Zusammenhang mit einigen Diskussionen über die Render-Perfektion, die wir im iOS-Team von Netflix hatten).

@bvaughn Vielen Dank für all die Arbeit, die im letzten Jahr in der Ausgabe / 6 geleistet wurde!
Ich teste derzeit ^1.6.0-alpha.1 und plane, mit dieser Version in die Produktion zu liefern.

Ich dachte, ich würde posten, was ich tun muss, um mit dem neuen DynamicSizeList für alle anderen zu arbeiten, die sich mit diesem Problem befassen und das Neueste in der Branche verwenden.

Das Befolgen der oben verlinkten Dokumente und der aus dem Issues / 6-Zweig generierten Dokumente führt zu

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

und so bestand die Lösung darin, nachzuahmen, was Sie in Tests tun und ...

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>;

Mein Beispiel enthält wahrscheinlich mehr als das, was Sie auf dieser Dokumentenseite möchten, aber hoffentlich erleichtert es Ihnen die Aktualisierung des Dokuments

Feedback zur aktuellen Version der Filiale?
💯 funktioniert gut
🎉 Nochmals vielen Dank für die ganze Arbeit!

edit: DynamicSizeList macht diese Bibliothek jetzt so einfach zu bedienen.

Vielen Dank für das Teilen der Details! Wenn ich etwas Bandbreite bekomme, um dieses Problem wieder zu beheben, werde ich mich mit ihnen befassen.

Ich denke, dieser Ansatz kann zusammen mit dem ursprünglichen Vorschlag in dieser Ausgabe verwendet werden.

Anstatt die vorherige Größe des Artikels zu verwenden, könnten wir einfach die geschätzten Größen verwenden - und die tatsächlichen Größen verfeinern, während jemand einen Bildlauf durchführt. (Ich denke nicht, dass es einen wichtigen Unterschied zwischen "zuvor gemessener Größe" und "geschätzter Größe" gibt, außer der Tatsache, dass die zuvor gemessene Größe wahrscheinlich genauer ist. Dennoch könnte dies ein akzeptabler Kompromiss sein, da dies möglich wäre Wenn wir zu beliebigen Stellen in den Daten springen, ohne die zuvor gemachten Daten zu rendern, müssen wir keinen Cache für die Elementgröße verwalten.)

Ich denke, dies könnte das Problem der Scroll-Verankerung erheblich vereinfachen. Wir könnten einfach den ersten Sprung machen (wie beschrieben) und dann so tun, als ob alles "vorher" (oben oder links) genau die geschätzte Größe hätte. Dann, während wir scrollen, verfeinern.

Könnte vielleicht funktionieren?

@bvaughn Behebt dies das Problem, das @xaviergmail behoben hat , gescrollt wird ? Ich habe eine Codesandbox für ein Beispiel erstellt, das nicht funktioniert. Wenn nicht, gibt es Problemumgehungen?

https://codesandbox.io/s/vr648ywy3

Lassen Sie uns die Kommentare zu diesem Problem auf die API-Diskussion konzentrieren, nicht auf die Fehlerbehebung.

Ich schlage Stack Overflow vor, um Fragen zu stellen.

Ist es möglich, den resetAfterIndex in dieser API verfügbar zu machen? Ich füge meiner DynamicSizeList hinzu, bearbeite sie und entferne sie, und zumindest von dem, was ich sammeln kann, wäre dies die Methode, die aufgerufen wird, um Höhen zu korrigieren, ja?

@bvaughn spielte über das Wochenende mit der Idee, die Elemente mit

poc-Implementierung https://github.com/piecyk/react-window/pull/2/files
Hier ist die Code-Sandbox, in der der Build des Zweigs ausgeführt wird
https://codesandbox.io/s/4x1q1n6nn9

uh-oh Firefox kann beim schnellen Scrollen nicht mit dem Rendern Schritt halten, wie dies bei Chrome mit diesem Ansatz der Fall ist 🤷‍♂️

Ich versuche, in einer App im Chatbox-Stil einen automatischen Bildlauf hinzuzufügen, und es tritt dieses Problem auf: 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.

Ich versuche, scrollToItem(items.length-1) in componentDidUpdate anzurufen

Ist das beabsichtigtes Verhalten?

Etwas spät, aber ich versuche, dieses Problem mit diesem Reaktionshaken zu lösen.

Nicht die beste Lösung, aber ich arbeite noch daran. Vielleicht können wir daran arbeiten, es allgemeiner (und einfacher) zu gestalten und ein Paket zu erstellen?

Gif um zu zeigen, wie das gerade funktioniert:
https://cl.ly/87ca5ac94deb

Vielleicht können wir eine neue Ausgabe eröffnen, um über eine Lösung für dieses Chat-ähnliche Verhalten zu sprechen?

Oh, oh, Firefox kann beim schnellen Scrollen nicht mit dem Rendern Schritt halten, wie dies bei Chrome mit diesem Ansatz der Fall ist

Sieht so aus, als würde es in Firefox Nightly Version 68 funktionieren.

@bvaughn Ich verwende die DynamicSizeList mit den Komponenten InfiniteLoader und Autosizer, um zu versuchen, einen Feed zu erstellen. Ich mag, was ich bisher seeng bin, mach weiter so :)

In Bezug auf API und Verhalten:

1. Können wir das Datenobjekt als zweites Argument im itemKey-Rückruf erhalten, so wie es in der FixedSizeList ist?

2. Können wir die Höhe des inneren Containers zurücksetzen, wenn das Datenobjekt gefiltert / geändert wird?

Ich benutze DynamicSizeList von 1.6.0-alpha.1 mit InfiniteLoader seit einer Weile und es hat großartig funktioniert. Vielen Dank für die tolle Funktion!

Jetzt muss ich jedoch scrollToItem() . Ähnlich wie bei einem obigen Kommentar, aber eindeutig, da noch gar nichts gemessen wird, verstehe ich:

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.

Es scheint nicht zeitabhängig zu sein, da ich versucht habe, es nach einem langen setTimeout aufzurufen. Kann ich eine Messung erzwingen? Oder gibt es Problemumgehungen?

EDIT : Nevermind, initialScrollOffset getan, was ich brauchte.

Warum findDOMNode verwenden?

Gibt es Typdefinitionen für den Zweig @next ?

@ WillSquire nein, das tun sie nicht. Ich bin mir auch nicht sicher, ob es möglich ist, sie bei @next in DefinitelyTyped freizugeben (ich könnte mich irren). Ich denke auch, dass es besser ist zu warten, bis dieser Zweig endgültig zusammengeführt und eine neue Version veröffentlicht wird, da sich die API noch ändern könnte.

@bvaughn Ich war bereit, dies bei devhub zu verwenden , aber bevor ich in die Integration investiere, denkst du, dass es bereits in gutem Zustand ist oder noch einige Blockerprobleme hat?

@brunolemos Meine

halte mich auf dem Laufenden!

~ Versucht es zu benutzen, aber bisher nicht erfolgreich. ~

Habe es geschafft, aber die Leistung ist nicht gut. Vielleicht sind meine Artikel-Renderings teuer oder etwas anderes.

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

Es sieht so aus, als ob in der neuesten Version bei Verwendung von AutoSizer mit einer Containerhöhe von 100% möglicherweise ein Fehler aufgetreten ist

Bearbeiten: Ich konnte mit 100vh und calc () eine Problemumgehung finden

Möglicherweise ist etwas kaputt gegangen

Zu vage, um umsetzbar zu sein. Teilen Sie einen Repro zusammen mit dem erwarteten Verhalten?

Ich verwende DynamicSizeList von 1.6.0-alpha.1 mit verschiedenen Filtern und einer komplexen Kartenansicht. Aber wir müssen mit der Höhe und Breite wickeln. Es funktioniert gut für mich.

Danke Jungs

Hallo, ich probiere DynamicSizeList , aber alle meine Elemente werden übereinander gerendert. Ich übergebe das Stilattribut an das gerenderte Element, aber wenn ich style protokolliere, sehe ich, dass height für jedes Element undefiniert ist, top und left sind immer 0 .
Was habe ich hier vermisst :-)?

@ graphee-gabriel du vermisst ein reproduktionsbeispiel.

Die Höhe wird anfangs absichtlich nicht angegeben, damit die Objekte mit ihrer natürlichen Größe gerendert werden können ...

Ok, ich verstehe die Logik, dann ist dies nicht der Grund, warum die Elemente übereinander gerendert werden.
Ich werde so viele Daten wie möglich bereitstellen. Ich dachte, dass ich möglicherweise einen häufigen Fehler gemacht oder einen offensichtlichen Schritt verpasst habe, der zu diesem Problem führt (z. B. das Stilobjekt nicht weiterzugeben).

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)

Teilen Sie eine Code-Sandbox, in der ich das sehen kann?

Ich würde vorschlagen, keine Inline-Funktion für Ihren Artikel-Renderer zu verwenden, da dies unnötige Remounts verursacht, da sie sich bei jedem Rendern des übergeordneten Elements ändert. (Aus diesem Grund vermeiden alle Beispiele Inline-Funktionen.)

@ graphee-gabriel Ich hatte dies auch, die Dokumente erwähnen es nicht, aber Sie müssen dafür sorgen, dass Ihre Zeilenkomponentenunterstützung eine Referenz erhält:

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

Hallo, los geht's:

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

Ja, für die Inline-Funktionen ist es ein wirklich alter Code, den ich versucht habe, in das Reaktionsfenster zu migrieren, und der sich auch hier nicht die Zeit genommen hat, ihn zu verbessern.
Vielen Dank für Ihr Feedback. Lassen Sie mich wissen, was Sie in diesem Sandkasten finden.

Annnnnd ich hätte die @ brunolemos- Nachricht überprüfen
Dies war der fehlende Schritt und hat mein Problem behoben, danke!

Es wurde ein weiteres Problem aufgeworfen. Ich habe die Sandbox aktualisiert, damit Sie @bvaughn reproduzieren können
Finden Sie es hier: https://codesandbox.io/s/sweet-sea-irxl8

Jetzt funktioniert die Liste einwandfrei, aber seltsamerweise scheint sie mit dem Inhalt zu wachsen und schrumpft nie wieder.

Bedeutung:

1. Wenn ich 6 Elemente zeige, scrolle bis zum Ende, alles ist in Ordnung.
2. Ändern Sie den Inhalt, um 20 Elemente anzuzeigen, scrollen Sie bis zum Ende, alles gut.
3. Ändern Sie den Inhalt zurück auf 6 Elemente, scrollen Sie bis zum letzten Element, aber ich kann weiter auf Leerzeichen scrollen, die vom vorherigen Inhalt (dem Datensatz mit 20 Elementen) übrig zu sein scheinen.

Es wurde ein weiteres Problem aufgeworfen. Ich habe die Sandbox aktualisiert, damit Sie @bvaughn reproduzieren können
Finden Sie es hier: https://codesandbox.io/s/sweet-sea-irxl8

Jetzt funktioniert die Liste einwandfrei, aber seltsamerweise scheint sie mit dem Inhalt zu wachsen und schrumpft nie wieder.

Bedeutung:

1. Wenn ich 6 Elemente zeige, scrolle bis zum Ende, alles ist in Ordnung.
2. Ändern Sie den Inhalt, um 20 Elemente anzuzeigen, scrollen Sie bis zum Ende, alles gut.
3. Ändern Sie den Inhalt zurück auf 6 Elemente, scrollen Sie bis zum letzten Element, aber ich kann weiter auf Leerzeichen scrollen, die vom vorherigen Inhalt (dem Datensatz mit 20 Elementen) übrig zu sein scheinen.

Ich habe das gleiche Problem

Genau das brauchte ich.
Ich habe gerade die DynamicSizeList von 1.6.0-alpha.1 in Kombination mit React-Virtualized-Auto-Sizer und React-Window-Infinite-Loader mit sehr guten Ergebnissen getestet.
Kann ich irgendetwas tun, um diesen Schritt voranzutreiben?

Hallo @bvaughn , hatten Sie Zeit, die Codesandbox von https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284 zu überprüfen?

Hallo, ich verwende DynamicSizeList für meine Chat-App.
Vielen Dank für die tolle Funktion.

Ich habe jedoch Probleme mit schlechter Leistung und viel Skriptverarbeitung.
Beim Scrollen steigt die CPU immer an und erreicht oft 100%.
Haben Sie Ideen für Lösungen?

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;

Hallo @bvaughn ,
Was ist der richtige Weg, um die Artikelhöhen bei der Größenänderung des Arbeitsplatzes neu zu berechnen? Mit Hilfe der obigen Kommentare mache ich eine Demo https://codesandbox.io/s/angry-hill-tcy2m
Wenn sich die Breite des Arbeitsplatzes mit der Maus ändert, muss die gesamte Elementhöhe neu berechnet werden (und möglicherweise wird der interne Höhencache der VariableSizeList-Komponente geleert) ...

Gibt es jetzt eine Lösung für die dynamische Liste? Ich habe gerade 4 Stunden damit verbracht, sie zum Laufen zu bringen
Nachdem ich alle Kommentare gelesen habe, bin ich fertig 😠
Wenn ihr eine funktionierende Lösung habt, gebt mir bitte Bescheid

Es gibt kein "euch" in diesem Projekt. Es wird von einer einzelnen Person gepflegt.

Und es ist etwas rücksichtslos, am selben Tag Kommentare zu mehreren Themen zu hinterlassen und sich über dasselbe zu beschweren. Verwenden Sie auf jeden Fall nur "React-Virtualized".

Es tut mir wirklich leid, dass ich einen Kommentar wie diesen Brian hinterlassen habe. Ich habe dieses Problem später gefunden und dann alle Kommentare gelesen und dachte, andere helfen dir zumindest

@ShivamJoker Ich habe es fast zum

@bvaughn hätten Sie Zeit, das Beispiel in der Sandbox von https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284 zu überprüfen?

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

Es beginnt daher mit der kürzeren Liste:

• Scrollen Sie bis zum Ende der Liste
• Scrollen Sie zurück nach oben und klicken Sie auf Show Long List
• bis zum Ende scrollen
• Scrollen Sie zurück nach oben und klicken Sie auf Show Short List
• Scrollen Sie zum Schluss ein letztes Mal nach unten, um zu sehen, dass auf die Kurzliste jetzt viele Leerzeichen folgen.

Vielen Dank!

@ShivamJoker Ich habe es fast zum

@bvaughn hätten Sie Zeit, das Beispiel in der Sandbox von # 6 (Kommentar) zu überprüfen?

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

Es beginnt daher mit der kürzeren Liste:

• Scrollen Sie bis zum Ende der Liste
• Scrollen Sie zurück nach oben und klicken Sie auf Show Long List
• bis zum Ende scrollen
• Scrollen Sie zurück nach oben und klicken Sie auf Show Short List
• Scrollen Sie zum Schluss ein letztes Mal nach unten, um zu sehen, dass auf die Kurzliste jetzt viele Leerzeichen folgen.

Vielen Dank!

Ja, im Grunde sollte der innere Container seine Höhe beim Filtern / Ändern von Daten zurücksetzen.

@ShivamJoker Ich habe es fast zum

@bvaughn hätten Sie Zeit, das Beispiel in der Sandbox von # 6 (Kommentar) zu überprüfen?

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

Es beginnt daher mit der kürzeren Liste:

• Scrollen Sie bis zum Ende der Liste
• Scrollen Sie zurück nach oben und klicken Sie auf Show Long List
• bis zum Ende scrollen
• Scrollen Sie zurück nach oben und klicken Sie auf Show Short List
• Scrollen Sie zum Schluss ein letztes Mal nach unten, um zu sehen, dass auf die Kurzliste jetzt viele Leerzeichen folgen.

Vielen Dank!

danke ich habe das gleiche implementiert in der hoffnung, dass es auch für andere benutzer gut funktioniert
und ja ich habe auch gesehen, dass das höhenproblem mit scroll ist

@ graphee-gabriel, aber ich habe noch ein Problem, das meine App-Leiste beim Scrollen nach unten versteckt hat. Was passiert jetzt nicht? Was kann die Lösung sein?

Guten Tag. Ich habe DinamycSizeList in meinem Demo-Projekt verwendet. Alles war in Ordnung, aber nach einer Weile bemerkte ich, dass die Listenkomponente nicht mehr richtig funktionierte. Zuerst dachte ich, es sei eine Bibliothek, von der das Reaktionsfenster abhängt. Aber schauen Sie sich Ihre Demo an
https://react-window-next.now.sh/#/examples/list/dynamic -size
bemerkte ungefähr das gleiche Ergebnis, obwohl es in der Vergangenheit auch perfekt funktionierte. Könnten Sie die Ursache dieser Fehler vorschlagen?

@simeonoff

Ja, im Grunde sollte der innere Container seine Höhe beim Filtern / Ändern von Daten zurücksetzen.

Wie soll ich das machen? Ich habe versucht, eine Zustandshöhe festzulegen, aber es scheint nicht zu funktionieren
irgendeine Lösung ?

@simeonoff

Ja, im Grunde sollte der innere Container seine Höhe beim Filtern / Ändern von Daten zurücksetzen.

Wie soll ich das machen? Ich habe versucht, eine Zustandshöhe festzulegen, aber es scheint nicht zu funktionieren
irgendeine Lösung ?

Es muss intern von der Bibliothek implementiert werden.

@ShivamJoker Ich habe es fast zum

@bvaughn hätten Sie Zeit, das Beispiel in der Sandbox von # 6 (Kommentar) zu überprüfen?

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

Es beginnt daher mit der kürzeren Liste:

• Scrollen Sie bis zum Ende der Liste
• Scrollen Sie zurück nach oben und klicken Sie auf Show Long List
• bis zum Ende scrollen
• Scrollen Sie zurück nach oben und klicken Sie auf Show Short List
• Scrollen Sie zum Schluss ein letztes Mal nach unten, um zu sehen, dass auf die Kurzliste jetzt viele Leerzeichen folgen.

Vielen Dank!

Sie können den Schlüssel festlegen, um Leerzeichen zu vermeiden.
https://codesandbox.io/s/blissful-voice-mzjsc

Hallo @bvaughn, danke für dieses großartige Projekt!

Aus Not habe ich einige Zeit im DynamicLists-Code verbracht, um herauszufinden, wie man ohne Einschränkungen überall scrollen kann und wie man zu einem gemessenen und nicht gemessenen Element blättert.

Ich habe es hier geschafft https://github.com/bvaughn/react-window/compare/issues/6...Sauco82 : Issues / 6, indem ich lastMeasuredIndex loswurde und stattdessen pro Artikel mit itemIsMeasured überprüfte

Ich habe noch nie an einem Open-Source-Projekt teilgenommen oder Flow verwendet, daher bin ich mir nicht ganz sicher, ob dies nützlich oder wertvoll ist, oder ob ich direkt eine PR ausprobieren oder hier diskutieren sollte.

Gerne helfe ich Ihnen weiter und optimiere sie. Wenn Sie etwas benötigen, lassen Sie es mich bitte wissen.

Hey, hier ist eine viel einfachere Lösung (es ist nicht erforderlich, Geisterelemente an DOM anzuhängen, um ihre Größe zu berechnen):
Codesandbox

Hey, hier ist eine viel einfachere Lösung (es ist nicht erforderlich, Geisterelemente an DOM anzuhängen, um ihre Größe zu berechnen):
Codesandbox

Genial! Für mich geht das. Gute Arbeit.

@Kashkovsky berechnete Größe, wenn aktualisiert wurde
und itemSize einmal aufrufen

@ userbq201 @Kashkovsky tolle ChatHistory.js wie folgt ändern:

    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}

Andernfalls werden alle Elemente mit derselben Standardhöhe gerendert. In Ihrem Fall funktioniert es so wie es ist, ich kann nicht erklären, warum es einen Unterschied gibt ... vielleicht kann @bvaughn es.

@bvaughn was ist, wenn wir ein ähnliches Verhalten für SSR aktivieren müssen? irgendeinen Hinweis für diese Seite?

@bvaughn Ich Demo funktioniert nicht?

Schöne Implementierung @Kashkovsky @ kirill-konshin und @ userbq201 !

Wie würden Sie mit dieser Lösung die Verwendung von Memoization angehen?

Ich habe versucht, ChatMessage in ein memo mit areEqual verpacken, aber React rendert jedes Objekt jedes Mal neu, wenn eine Nachricht zur Liste hinzugefügt wird.

In meinen anderen FixedSizedLists funktioniert die Memoisierung gut mit diesem memo / areEqual-Wrapper, aber vielleicht wirkt sich das auf ref={root} aus?

Sie können leicht erkennen, ob React die Komponenten neu rendert, indem Sie a aufkleben

Ich habe das Beispiel hier gegabelt: https://codesandbox.io/s/dynamic-size-of-react-window-list-items-nb038

BEARBEITEN: Ich habe die Memoisierung behoben - sie soll die anfängliche Funktionskomponente mit Memo umschließen - nicht die wie ich es getan hatte. Hier ist eine gespeicherte Lösung für den Fall, dass jemand eine komplexe DOM-Struktur in seinen Listen hat (oder Videos wie ich zuordnen muss): https://codesandbox.io/s/dynamic-size-of-react-window-list -items-errt4

EDIT 2: Es stellt sich heraus, dass das anfängliche Rendern der Zeilen völlig in Ordnung ist, aber das Aufrufen von resetAfterIndex ist sehr schwierig zu verwalten. Meine Daten ändern sich (zum Beispiel, wenn der Benutzer eine andere Konversation auswählt). Das eigentliche Problem ist jedoch, dass resetAfterIndex zu laufen scheint, bevor die neuen setSize fertig werden können. Der zwischengespeicherte Stil wird also erfolgreich gelöscht, aber dann wird einfach wieder ein neuer Cache der alten Stile generiert, da der Browser die Größe des Inhalts noch nicht geändert hat.

Ich bin mir nicht sicher, ob das schriftlich Sinn macht, aber ich muss vorerst eine Stecknadel in diese stecken. Bitte lassen Sie mich wissen, ob jemand seinen Inhalt erfolgreich dynamisch ändert und aktualisierte Höhenstile beibehält.

Ich habe viele andere Implementierungen von Reaktionsfenstern, daher würde ich es wirklich vorziehen, hier eine gute Lösung zu finden, anstatt für diesen einen Anwendungsfall reaktionsvirtualisiert zu verwenden.

EDIT 3: Dies wird meine endgültige Bearbeitung sein, da ich endlich eine semi-elegante Lösung gefunden habe.

1.) Wenn sich die itemData ändern müssen (dh wenn sich die Konversation ändert), heben Sie die Bereitstellung der gesamten Bereitstellung auf Komponente und mounten Sie sie dann erneut mit den neuen itemData. Dies kann mit einem setState-Rückruf erfolgen. Dadurch wird sichergestellt, dass beim Ändern Ihrer Daten keine alten Höhenstile übernommen werden.

2.) Ich habe {sizeMap, setSize, listRef} ChatMessage über ChatContext an ChatMessage ChatContext . Auf diese Weise kann ich ChatMessage anweisen, die Größe festzulegen und sie mit der alten Größe zu vergleichen, anstatt sie nur blind einzustellen. Wenn sich die alte Größe von der neuen Größe unterscheidet, rufen Sie resetAfterIndex beginnend bei index und übergeben true, um die Aktualisierung zu erzwingen.

Meine neue ChatMessage sieht also ungefähr so ​​aus:

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.) Ich habe hinzugefügt, was im Grunde ein Zuhörer in der ist Komponente, die auf die neu gemountete wartet gerendert werden. Einmal gerendert, rollt es nach unten. Dies behebt das Problem beim Versuch, die scrollTo-Funktion direkt in componentDidMount zu platzieren, da sie vor dem Aufruf dieser Methode nie gerendert wurde. So sieht aus wie das:

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}/>;
    }
}

Es scheint ein wirklich seltsames Verhalten auf Safari zu geben.

Die Höhe des DynamicSizedList-Divs und die Höhe oder der Rand oben in den Zeilen funktionieren nicht richtig. Der Inhalt beginnt sich zu überlappen.

Wenn sich die Fensterbreite / der Inhalt der Zeile ändert, wird die neue Höhe nicht neu berechnet oder geändert, um mit der neuen Höhe des Inhalts zu arbeiten.

Etwas, das es zu beheben scheint, ist, wenn der Inhalt scrollbar ist und zu einem Punkt gescrollt wird, an dem die Zeile nicht mehr sichtbar ist. Wenn Sie zurück zu ihr scrollen, wird sie korrekt gerendert.

Der Inhalt wird beim Laden der ersten Seite nicht korrekt gerendert, sodass eine Aktualisierung das Problem nicht zu beheben scheint: /

In anderen Browsern wie Chrome und Firefox funktioniert alles einwandfrei. Safari ist schrecklich, aber leider muss die App noch für Leute funktionieren, die sie benutzen.

Ich könnte wirklich Hilfe gebrauchen!

@tastyqbit Ich bin auch auf das gleiche Problem in Safari und Internet Explorer

Wenn Sie Problemumgehungen finden, lassen Sie es mich bitte wissen!

@afreix @tastyqbit Ich bin mir ziemlich sicher, dass Ihre Probleme mit Safari und Internet Explorer auf die mangelnde Unterstützung von ResizeObserver in diesen Browsern zurückzuführen sind. Ich hatte genau Ihr Problem (Scrollen zurück hat es behoben) und das Hinzufügen einer Polyfüllung hat es für mich gelöst. Kompatibilitätstabellen finden Sie unter MDN .

Ich denke, das Fehlen von ResizeObserver sollte eine Warnung in der Konsole erzeugen.

Was ist mit so etwas https://codesandbox.io/s/agitate-jennings-o9nn6 ?

Grundlegende Verwendung von VariableSizeList + ItemMeasurer aus # 102 Ich weiß, dass dies ein sehr naiver Ansatz ist, aber es sieht so aus, als würde er als temporäre Lösung funktionieren (nicht so schlecht 😂)

In unserem Team stießen wir auf die Notwendigkeit, eine große Liste von Textdaten mit zufälliger Größe zu rendern.
Für uns war die Fähigkeit, genau zwischen Elementen zu springen und ohne Verzögerungen zu scrollen, ein Muss.
Nach einigem Hin und Her habe ich aufgegeben und diese Bibliothek geschrieben .
Hoffe, es hilft als vorübergehende Lösung für einige von Ihnen: smile_cat:

Hallo,
Ich wollte nur aktualisieren, dass die Bibliothek nach einigen Arbeiten einen anständigen Zustand erreicht hat und eine gute Lösung sein könnte, wenn Ihre Elemente nach dem ersten Rendern ihre Größe nicht ändern.

@ gnir-work Was passiert, wenn die Größe des Fensters geändert wird und sich die Containergröße ändert, wodurch die Größe der Liste geändert wird?

Wenn Sie diesen Thread lesen, gibt es möglicherweise eine bessere Möglichkeit, mit Elementen umzugehen, deren Breite sich ändern kann.

Die Definition von 'Variable' ist hier über die gesamte Menge variabel. Die tatsächliche Artikelgröße ist statisch und nicht dynamisch. Möglicherweise ist Dynamik ein besserer Begriff, da sich die Größe während der Größenänderung oder Mutation ändern kann, wenn sich der Text ändert.

Dies könnte funktionieren, indem Sie sich das Scrollen auf dem übergeordneten Element anhören.

Der Algorithmus würde folgendermaßen funktionieren:

• Berechnen Sie eine geschätzte Größe für jeden Artikel - dies muss sehr effizient sein. Es muss nicht perfekt sein. + - 20% sind in Ordnung.

• Wir rendern nur Elemente, die sichtbar sind + sagen 20% mehr, damit der Benutzer beim Scrollen keine Änderungen sieht

• Wir haben einen "Geist" für alles andere, dessen "Höhe" auf die geschätzte Höhe eingestellt ist. Es ist nur eine leere Div. Auf diese Weise sieht die Bildlaufleiste ungefähr richtig aus.

• Ein Element wird nur angezeigt, wenn es sich im Ansichtsfenster befindet. Ansonsten werden die Geistergegenstände angezeigt.

Der einzige Nachteil dabei ist, dass sich die Höhe der Bildlaufleiste geringfügig ändert. Ich bin mir nicht sicher, ob dies den Benutzer ablenken würde. Könnte sein, wenn die Bildlaufliste groß ist. Möglicherweise können wir dies austricksen, indem wir einen Puffer so vergrößern / verkleinern, dass die geschätzten Größen keinen Einfluss auf die Länge der Bildlaufleiste haben.

@ gnir-work Was passiert, wenn die Größe des Fensters geändert wird und sich die Containergröße ändert, wodurch die Größe der Liste geändert wird?

Ab der neuesten Version ( 2.2.0 ) unterstützt die Komponente Änderungen an der Größe der gesamten Liste (Höhe und Breite).

Wenn Sie diesen Thread lesen, gibt es möglicherweise eine bessere Möglichkeit, mit Elementen umzugehen, deren Breite sich ändern kann.

Die Definition von 'Variable' ist hier über die gesamte Menge variabel. Die tatsächliche Artikelgröße ist statisch und nicht dynamisch. Möglicherweise ist Dynamik ein besserer Begriff, da sich die Größe während der Größenänderung oder Mutation ändern kann, wenn sich der Text ändert.

Dies könnte funktionieren, indem Sie sich das Scrollen auf dem übergeordneten Element anhören.

Der Algorithmus würde folgendermaßen funktionieren:

• Berechnen Sie eine geschätzte Größe für jeden Artikel - dies muss sehr effizient sein. Es muss nicht perfekt sein. + - 20% sind in Ordnung.
• Wir rendern nur Elemente, die sichtbar sind + sagen 20% mehr, damit der Benutzer beim Scrollen keine Änderungen sieht
• Wir haben einen "Geist" für alles andere, dessen "Höhe" auf die geschätzte Höhe eingestellt ist. Es ist nur eine leere Div. Auf diese Weise sieht die Bildlaufleiste ungefähr richtig aus.
• Ein Element wird nur angezeigt, wenn es sich im Ansichtsfenster befindet. Ansonsten werden die Geistergegenstände angezeigt.

Der einzige Nachteil dabei ist, dass sich die Höhe der Bildlaufleiste geringfügig ändert. Ich bin mir nicht sicher, ob dies den Benutzer ablenken würde. Könnte sein, wenn die Bildlaufliste groß ist. Möglicherweise können wir dies austricksen, indem wir einen Puffer so vergrößern / verkleinern, dass die geschätzten Größen keinen Einfluss auf die Länge der Bildlaufleiste haben.

Dies wurde bereits von @bvaughn in react-virtualized implementiert. Der Hauptnachteil dieses Ansatzes besteht darin, dass das Springen zu einer bestimmten Zeile nicht gut funktioniert und beim Scrollen nach oben visuelle Fehler verursacht.

@ gnir-work ah .. ok ... vielleicht werde ich meine Arbeit abbrechen und mir reaktionsvirtualisiert ansehen.

Ich denke, Sie haben Recht mit den Problemen beim Scrollen, aber ich denke, ich kann dies beheben, indem ich eine 'geschätzte Größe' habe und diese dann in eine tatsächliche Größe konvertiere, sobald die Komponente montiert ist.

... aber ein weiteres Problem ist natürlich der Umgang mit dynamischen Inhalten. Wenn etwas aktualisiert wird, ändert sich die Komponentenhöhe.

Wenn die geschätzte Größe genau ist, als es möglicherweise funktioniert, implementiere ich beispielsweise vor einiger Zeit eine virtualisierte Liste mit dynamischer Höhe mit reaktionsvirtualisiert und sie hat gut funktioniert, solange die geschätzte Größe genau war. Andernfalls würde die Funktion zum Scrollen in Zeilen meine App beschädigen ☹

Von Mail für Windows 10 gesendet

Von: Kevin Burton
Gesendet: Dienstag, 14. April 2020, 23:07 Uhr
An: bvaughn / react-window
Cc: Nir Geller; Erwähnen
Betreff: Re: [bvaughn / react-window] Unterstützt Just-in-Time-Messinhalte (# 6)

@ gnir-work ah .. ok ... vielleicht werde ich meine Arbeit abbrechen und mir reaktionsvirtualisiert ansehen.
Ich denke, Sie haben Recht mit den Problemen beim Scrollen, aber ich denke, ich kann dies beheben, indem ich eine 'geschätzte Größe' habe und diese dann in eine tatsächliche Größe konvertiere, sobald die Komponente montiert ist.
... aber ein weiteres Problem ist natürlich der Umgang mit dynamischen Inhalten. Wenn etwas aktualisiert wird, ändert sich die Komponentenhöhe.
- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder melden Sie sich ab.

- -
Diese E-Mail wurde von der Avast-Antivirensoftware auf Viren überprüft.
https://www.avast.com/antivirus

@ gnir-work ah ... Ich glaube nicht, dass ich die Funktion "In Zeile scrollen" brauche, obwohl ich mich vielleicht irre.

Dass dies für Ihre Bedürfnisse ausreichen sollte 😊

Von Mail für Windows 10 gesendet

Von: Kevin Burton
Gesendet: Dienstag, 14. April 2020, 23:13 Uhr
An: bvaughn / react-window
Cc: Nir Geller; Erwähnen
Betreff: Re: [bvaughn / react-window] Unterstützt Just-in-Time-Messinhalte (# 6)

@ gnir-work ah ... Ich glaube nicht, dass ich die Funktion "In Zeile scrollen" brauche, obwohl ich mich vielleicht irre.
- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder melden Sie sich ab.

- -
Diese E-Mail wurde von der Avast-Antivirensoftware auf Viren überprüft.
https://www.avast.com/antivirus

Um dieses Problem zu umgehen, wenn:

• Ihre Listenzeilenhöhe hängt nur vom inneren Text ab (plus möglicherweise einigen Elementen mit bestimmten Abmessungen).
• und Ihre Liste hat eine feste Breite

Sie können CanvasRenderingContext2D.measureText () verwenden, um die Zeilenhöhe zu berechnen, anstatt die gesamte Komponente zu rendern: poop:

CodeSandbox

@bvaughn Gibt es Pläne, eine neue Alpha-Version auf npm zu veröffentlichen? Wir haben seit 1.6.0-alpha.1 😕 kein Update mehr gehabt

@bvaughn irgendwelche Updates? Wird es in neueren Versionen behoben?

Für diejenigen, die Typescript mit DynamicSizeList möchten, kann die Modulerweiterung die Typen angeben, die für die Bearbeitung der DefinitelyTyped-Definitionen für DynamicSizeList erforderlich sind (eine Problemumgehung für meine im letzten Jahr in diesem Thread veröffentlichte Abfrage).

Fügen Sie dem Projekt Folgendes hinzu:

import React, { Component } from 'react'

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

Dann wie gewohnt importieren:

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

// use as normal...

@types/react-window muss noch zuerst für die Definition von FixedSizeListProps installiert werden.

Vielen Dank für die typedefs, die jetzt hinzugefügt werden! Ich verwende DynamicSizeList seit über einem Jahr in prod. Derzeit basiert auf dieser Gabelung: "@john-osullivan/react-window-dynamic-fork": "^1.9.0-alpha.1" (ist das noch die aktuellste Sache?). Ich habe versucht, zu react-virtuoso zu wechseln, da nicht sicher ist, ob / wann dies tatsächlich veröffentlicht wird. Fand es aber weniger performant und steckte w / das fest.

@bvaughn ist es noch Zeit, den Kuhpfad zu ebnen und diesen an npm freizugeben? Vielleicht einfach in ExperimentalDynamicSizeList wenn Sie immer noch besorgt sind, dass es nicht fertig ist.

Hallo Leute! Vielen Dank für Ihre harte Arbeit und diese großartige Bibliothek. Ich freue mich sehr auf dieses Feature! Ich würde jedoch vorschlagen, der README-Datei und den Dokumentationen / Beispielen Informationen zu diesem Problem hinzuzufügen. Ich habe einige Zeit gebraucht, um herauszufinden, dass dynamischer Inhalt von der Bibliothek nicht unterstützt wird und nur für Elemente mit fester / bekannter Größe nützlich ist. Ich glaube, die README hat einen schönen FAQ-Bereich, in dem dies hinzugefügt werden könnte.

Wenn Sie nach einer Tabelle / einem Raster / einem Baum suchen, ist dies ein guter Anfang. https://autodesk.github.io/react-base-table/examples/dynamic-row-heights , basierend auf VariableSizeGrid

@ tony-scio können Sie bitte eine funktionierende Codesandbox für die Verwendung von DynamicSizeList ab 1.6.0-alpha.1 mit InfiniteLoader freigeben? Danke, ich würde es wirklich schätzen.

Hat jemand dies dazu gebracht, mit React-Beautiful-Dnd zu arbeiten? Durch Ziehen scheinen die Elemente übereinander zu springen.

Hat jemand dies dazu gebracht, mit React-Beautiful-Dnd zu arbeiten? Durch Ziehen scheinen die Elemente übereinander zu springen.

Ich werde auch auf diese Antwort warten: D.

[HILFE]
Unter diesem Link gibt es keinen Code zum Anzeigen:
Dynamic-Size-List-Vertical
und ich brauche diese Fähigkeit.
VIELEN DANK

[HILFE]
Unter diesem Link gibt es keinen Code zum Anzeigen:
Dynamic-Size-List-Vertical
und ich brauche diese Fähigkeit.
VIELEN DANK

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

Gibt es hierzu Neuigkeiten? Wir brauchen etwas Ähnliches wie wir können (es sind normalerweise sehr wenige, aber in einigen Fällen können es viele sein), um eine große reaktionsschnelle Rasterliste von Elementen zu rendern (ihre Höhen sind dynamisch und ändern sich auf Mobilgeräten als verschiedene Textumbrüche usw.). Ich denke, react-window wäre ein Game Changer, wenn es diesen Anwendungsfall bewältigen könnte. Wenn nicht, gibt es zuverlässige Alternativen?

Gibt es hierzu Neuigkeiten? Wir brauchen etwas Ähnliches wie wir können (es sind normalerweise sehr wenige, aber in einigen Fällen können es viele sein), um eine große reaktionsschnelle Rasterliste von Elementen zu rendern (ihre Höhen sind dynamisch und ändern sich auf Mobilgeräten als verschiedene Textumbrüche usw.). Ich denke, react-window wäre ein Game Changer, wenn es diesen Anwendungsfall bewältigen könnte. Wenn nicht, gibt es zuverlässige Alternativen?

@JavaJamie, da Sie speziell nach Alternativen gefragt haben - die reaktionsvirtuose Bibliothek bietet eine integrierte Unterstützung für die Messung dynamischer Inhalte. Haftungsausschluss: Ich bin der Autor davon.

@JavaJamie, da Sie speziell nach Alternativen gefragt haben - die reaktionsvirtuose Bibliothek bietet eine integrierte Unterstützung für die Messung dynamischer Inhalte. Haftungsausschluss: Ich bin der Autor davon.

React-Virtuoso ist auch doppelt so groß wie React-Window. Die Abhängigkeitsgröße muss immer berücksichtigt werden.

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

Ich habe die Tatsache akzeptiert, dass ich weder Zeit noch Energie habe, um diese Bemühungen zu beenden. Wenn jemand in den von mir gestarteten Zweig eintreten und ihn beenden möchte, würde ich mich über Ihre Hilfe freuen. (In Ausgabe Nr. 302 erfahren Sie auch, wie dies als neue Komponenten List und Grid in Version 2 passen würde.)

Wir haben dafür etwas von Grund auf neu implementiert, das Sichtbarkeitssensoren verwendet, die wirklich gut funktioniert haben.

Ich könnte es wahrscheinlich OSS oder euch auf den richtigen Ort verweisen, wenn ihr es herausreißen und ein neues Projekt erstellen oder hierher verschieben wollt.

Ein Trick ist, dass wir "Blöcke" verwendet haben, um die Leistung zu steigern. Grundsätzlich nehmen wir jede Zeile und fügen sie tatsächlich in einen übergeordneten Block mit etwa 25 Elementen ein. Tauschen Sie diese dann bei Bedarf aus.

@burtonator wäre es wirklich hilfreich

Kann jemand eine fehlerfreie Implementierung von React-Select mit DynamicSizeList bereitstellen?
Ich kann es nicht gut zusammenarbeiten lassen.
Derzeit habe ich 2 Probleme (sorry für keine Screenshots):

1. Alle Elemente haben style={position: absolute, left: 0, top: 0} wodurch ich diesen Stil nicht verwenden kann, da alle Optionen übereinander liegen.
2. Wenn ich die Stil-Requisite nicht verwende, wird die Liste gut angezeigt, aber wenn ich ein wenig scrolle, wird der Teil der Liste mit den darin enthaltenen Optionen verkleinert, während die Gesamthöhe unverändert bleibt. Wenn ich also scrolle, erhalte ich x Pixel der tatsächlichen Optionen und einen Leerraum von x Pixel.

Es konnte kein funktionierendes Beispiel für die beiden gefunden werden.
Ich werde feststellen, dass ich die Gabel 1.9.0 in Chrome verwende.

Bearbeiten. Hier oben im Bereich mit versteckten Kommentaren eine Antwort gefunden. https://github.com/bvaughn/react-window/issues/6#issuecomment -509016422

Eine Vereinfachung des Bildlaufproblems besteht darin, die Bildlaufleiste zu verwenden, um den Index des Elements in der Liste anstelle einer Pixelposition anzuzeigen, wenn der Bildlauf mehr als ungefähr eine Ansichtsfensterhöhe entfernt ist. Anstatt zu versuchen, X Pixel nach unten zu "scrollen", rendert die Komponente die Elemente einfach um den gewünschten Index. Auf halber Höhe wird das Element am Index N / 2 und unten am Index N-1 gerendert.

Dies würde ein direktes Scrollen des Daumens zur Mitte oder zum Ende der Liste ermöglichen, ohne dass der Scrolldaumen verzögert wird, während die Komponente die Größe rendert und berechnet. Derzeit ist es für sehr lange VariableSizeList-Komponenten fast unmöglich, nach unten zu scrollen, da sich der Cursor schneller bewegt, als sich der Scroll-Daumen bewegt.