Implementierung der virtuellen React-Liste

importiere React, { useState } von 'react';
importiere { VirtualList } aus „biz-web-library“;
// Definieren Sie die Komponente für die Anzeige der einzelnen Daten const ItemRender = ({ data }) => {
  let dindex = parseInt(Daten);
  lass lineHeight = dindex % 2 ? '40px' : '80px';
  zurückkehren (
    <div Stil = {{ Zeilenhöhe, Hintergrund: dindex % 2 ? '#f5f5f5' : '#fff' }}>
      <h3>#{dindex} Titelname</h3>
      <p>Schreiben Sie, was Sie wollen, keine Begrenzung der Seitenhöhe</p>
    </div>
  );
};
const ItemRenderMemo = React.memo(ItemRender);

// Listendaten initialisieren const getDatas = () => {
  const Daten = [];
  für (sei i = 0; i < 100000; i++) {
    datas.push(`${i} Element`);
  }
  Daten zurückgeben;
};

// Virtuelle Liste verwenden export default () => {
  let [Ressourcen, setResources] = useState([]);
  const changeResources = () => {
    : Setze Ressourcen(getDatas());
  };

  zurückkehren (
    <div>
      <button onClick={changeResources}>klick mich </button>

      <div
        Stil={{
          Höhe: '400px',
          Überlauf: „auto“,
          Rahmen: '1px durchgezogen #f5f5f5',
          Polsterung: '0 10px',
        }}
      >
        <VirtuelleListe
          ItemRender={ItemRenderMemo}
          Ressourcen={Ressourcen}
          geschätzteArtikelgröße={60}
        />
      </div>
    </div>
  );
};

// Gesamtinitialisierungshöhe der Ringcacheliste export const initPositinoCache = (
  geschätzteArtikelgröße: Zahl = 32,
  Länge: Zahl = 0,
) => {
  sei Index = 0,
  Positionen = Array(Länge);
  während (Index < Länge) {
    Positionen[Index] = {
      Index,
      Höhe: geschätzteArtikelgröße,
      oben: Index * geschätzteArtikelgröße,
      unten: (Index++ + 1) * geschätzteArtikelgröße,
    };
  }
  Positionen zurückgeben;
};

// Zwischenspeichern Sie die Positionen aller Elemente let positions: Array<PositionType>;

Klasse VirtualList erweitert React.PureComponent{
 
  Konstruktor(Requisiten) {
    super(Requisiten);
    const { Ressourcen } = this.props;

    // Cache-Positionen initialisieren = initPositinoCache(props.estimatedItemSize, resources.length);
    dieser.Zustand = {
      Ressourcen,
      StartOffset: 0,
      listHeight: getListHeight(positions), // unteres Attribut der letzten Daten in Positionen scrollRef: React.createRef(), // virtueller Listencontainer ref
      Elemente: React.createRef(), // Virtueller Listenanzeigebereich ref
      visibleCount: 10, // Anzahl der sichtbaren Bereiche auf einer Seite startIndex: 0, // Startindex des sichtbaren Bereichs endIndex: 10, // // Endindex des sichtbaren Bereichs };
  }
  // TODO: Einige andere Funktionen ausblenden. . . . .


  //Layout rendern() {
  const { ItemRender = ItemRenderComponent, Erweiterung } = this.props;
  const { Listenhöhe, Startoffset, Ressourcen, Startindex, Endindex, Elemente, Scrollreferenz } = dieser.Zustand;
  let visibleData = resources.slice(startIndex, endIndex);

  zurückkehren (
    <div ref={scrollRef} Stil={{ Höhe: `${listHeight}px` }}>
      <ul
        ref={Artikel}
        Stil={{
          transformieren: `translate3d(0,${startOffset}px,0)`,
        }}
      >
        {visibleData.map((Daten, Index) => {
          zurückkehren (
            <li Schlüssel={Daten.ID || Daten.Schlüssel || Index} Datenindex={`${startIndex + index}`}>
              <ItemRender-Daten = {Daten} {...extrea}/>
            </li>
          );
        })}
      </ul>
    </div>
  );
  }
} 

componentDidMount() {
  Ereignisse.auf(dieses.getEl(), 'scroll', dieses.aufScrollen, falsch);
  events.on(this.getEl(), 'Mausrad', NOOP, false);

  // Berechnen Sie den neuesten Knoten basierend auf dem Rendering let visibleCount = Math.ceil(this.getEl().offsetHeight / estimateItemSize);
  wenn (sichtbarerAnzahl === dieser.Zustand.sichtbarerAnzahl || sichtbarerAnzahl === 0) {
    zurückkehren;
  }
  // Aktualisiere endIndex, listHeight/offset, da visibleCount sich geändert hat this.updateState({ visibleCount, startIndex: this.state.startIndex });
}

getEl = () => {
    let el = dieser.Zustand.scrollRef || dieser.Zustand.Elemente;
    let parentEl: any = el.current?.parentElement;
    Schalter (Fenster.getComputedStyle(parentEl)?.overflowY) {
      Fall 'auto':
      Fall 'scrollen':
      Fall 'Overlay':
      Fall 'sichtbar':
        returniere übergeordnetesEl;
    }
    Dokumenttext zurückgeben;
};

beimScrollen = () => {
    requestAnimationFrame(() => {
      let { scrollTop } = this.getEl();
      let startIndex = binarySearch(positionen, scrollTop);

      // Da sich der Startindex ändert, aktualisiere den Endindex und die Listenhöhe/den Offset. this.updateState({ visibleCount: this.state.visibleCount, startIndex});
    });
  };

// Tool-Funktion, in Tool-Datei einfügen export const binarySearch = (list: Array<PositionType>, value: number = 0) => {
  lass starten: Zahl = 0;
  let end: Zahl = Listenlänge – 1;
  lass tempIndex = null;
  während (Start <= Ende) {
    let midIndex = Math.floor((start + end) / 2);
    sei mittlererWert = Liste[mittlererIndex].unten;

    // Wenn die Werte gleich sind, wird der gefundene Knoten direkt zurückgegeben (da dieser unten liegt, sollte startIndex der nächste Knoten sein)
    wenn (Mittelwert === Wert) {
      gibt MidIndex + 1 zurück;
    }
    // Wenn der mittlere Wert kleiner als der Eingabewert ist, bedeutet das, dass der dem Wert entsprechende Knoten größer als Start ist, und Start wird um eine Position zurückbewegt, sonst wenn (Mittelwert < Wert) {
      Start = Mittelindex + 1;
    }
    // Wenn der mittlere Wert größer als der Eingabewert ist, bedeutet dies, dass der Wert vor dem mittleren Wert liegt und der Endknoten zur Mitte - 1 verschoben wird.
    sonst wenn (Mittelwert > Wert) {
      // tempIndex speichert alle Werte, die dem Wert am nächsten sind, wenn (tempIndex === null || tempIndex > midIndex) {
        tempIndex = mittlererIndex;
      }
      Ende = mittlererIndex - 1;
    }
  }
  gibt TempIndex zurück;
};

 updateState = ({ sichtbareAnzahl, startIndex }) => {
    // Daten entsprechend dem neu berechneten Knoten aktualisieren this.setState({
      startOffset: startIndex >= 1 ? Positionen[startIndex - 1]?.unten : 0,
      Listenhöhe: getListHeight(Positionen),
      StartIndex,
      sichtbareAnzahl,
      endIndex: getEndIndex(diese.state.resources, startIndex, sichtbareAnzahl)
    });
  };

// Das Folgende ist eine Tool-Funktion, die in anderen Dateien abgelegt wird. export const getListHeight = (positions: Array<PositionType>) => {
    let index = Positionen.Länge - 1;
    Rückgabeindex < 0? 0: Positionen[Index].unten;
  };

exportiere const getEndIndex = (
  Ressourcen: Array<Daten>,
  startIndex: Zahl,
  sichtbareAnzahl: Zahl,
) => {
  let resourcesLength = Ressourcen.Länge;
  let endIndex = startIndex + sichtbareAnzahl;
  Gibt „Ressourcenlänge“ > 0 zurück? Math.min(Ressourcenlänge, Endindex) : Endindex;
}

 KomponenteDidUpdate() {
  dies.updateHeight();
}

  
updateHöhe = () => {
  let-Elemente: HTMLCollection = this.state.items.current?.children;
  wenn (!items.length) return;

  // Cache aktualisieren updateItemSize(positions, items);

  // Gesamthöhe aktualisieren let listHeight = getListHeight(positions);

  // Gesamten Offset aktualisieren let startOffset = getStartOffset(this.state.startIndex, positions);

  dies.setState({
    Listenhöhe,
    StartOffset,
  });
};

// Das Folgende ist eine Tool-Funktion, die in anderen Dateien abgelegt wird export const updateItemSize = (
  Positionen: Array<PositionType>,
  Elemente: HTMLCollection,
) => {
  Array.von(Elemente).fürJedes(Element => {
    let index = Zahl(item.getAttribute('Datenindex'));
    let { Höhe } = item.getBoundingClientRect();
    lass alteHeight = Positionen[Index].Höhe;

    //Wenn ein Unterschied besteht, aktualisiere alle Knoten nach diesem Knoten. let dValue = oldHeight - height;
    wenn (dWert) {
      Positionen[Index].unten = Positionen[Index].unten - dWert;
      Positionen[Index].Höhe = Höhe;

      für (let k = Index + 1; k < Positionen.Länge; k++) {
        Positionen[k].oben = Positionen[k - 1].unten;
        Positionen[k].unten = Positionen[k].unten - dWert;
      }
    }
  });
};

//Den aktuellen Offset abrufen export const getStartOffset = (
  startIndex: Zahl,
  Positionen: Array<PositionType> = [],
) => {
  startIndex >= 1 zurückgeben? Positionen[startIndex - 1]?.unten: 0;
};

export const getListHeight = (positions: Array<PositionType>) => {
  let index = Positionen.Länge - 1;
  Rückgabeindex < 0? 0: Positionen[Index].unten;
};

 statisch getDerivedStateFromProps(
    nextProps: VirtualListProps,
    vorherigerZustand: VirtualListState,
  ) {
    const { Ressourcen, geschätzteArtikelgröße } = nextProps;
    wenn (Ressourcen !== vorherigerStatus.Ressourcen) {
      Positionen = initPositinoCache(geschätzteArtikelgröße, Ressourcen.Länge);

      // Höhe aktualisieren let listHeight = getListHeight(positions);

      // Gesamten Offset aktualisieren let startOffset = getStartOffset(prevState.startIndex, positions);

     
      let endIndex = getEndIndex(Ressourcen, vorherigerZustand.startIndex, vorherigerZustand.visibleCount);
     
      zurückkehren {
        Ressourcen,
        Listenhöhe,
        StartOffset,
        EndeIndex,
      };
    }
    gibt null zurück;
  }