Eine kurze Analyse von SuspenseList in React18 und dessen Verwendung

So starten Sie schnell mit VUE3.0: Erfahren Sie mehr über

die Vergangenheit und Gegenwart von Suspense.

Diese Funktion erschien erstmals in Version 16.6, die die Suspense -Komponente veröffentlichte, die die Codeaufteilung unterstützt. Die Datenextraktion wird jetzt in Version 16.9 unterstützt. Interessierte Studierende können zum changelog von React wechseln.

Die einfache Verwendung von Suspense

wurde bereits vorgestellt. Wir verwenden nur ein Beispiel, um das Konzept zu überprüfen und

// Diese Komponente wird dynamisch geladen const OtherComponent = React.lazy(() => import('./OtherComponent'));

Funktion MyComponent() {
  zurückkehren (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Wenn die OtherComponent Komponente noch keine Rendering-Bedingungen hat, wird die per fallback übergebene Komponente für das vorgefertigte Rendering verwendet. Das Fehlen von Rendering-Bedingungen äußert sich hier insbesondere darin, dass die Datenerfassungszeit lang ist, die Komponentenstruktur komplex ist usw. Wir möchten jedoch nicht, dass diese Auswirkungen auf das Rendern auf dem ersten Bildschirm oder die Initialisierung der Anwendung haben. Der vorherige Suspense -Artikel hat es eingeführt, daher werde ich nicht auf Details eingehen.

Was SuspenseList ist,

lässt sich leicht wörtlich verstehen. Das heißt, wenn unser Code mehrere Suspense enthält, wie sollten wir deren Anzeigereihenfolge und Anzeigemethode steuern? Daher stellt uns React offiziell die SuspenseList Komponente zur Verfügung.

<SuspenseList revealOrder="forwards">
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={'Loading...'}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

Lassen Sie uns zunächst die einzigen beiden Props von SuspenseList

Suspense revealOrder Werte sind forwards , backwards “ und together

• forwards , die von vorne angezeigt werden

tail

• ,

• backwards

• together Suspenses gleichzeitig angezeigt werden, anstatt sie einzeln anzuzeigen

Entladene Elemente in SuspenseList

zeigen standardmäßig alle Fallback

• collapsed

• SuspenseList der Liste

an und zeigen nur die Liste an. Das nächste

hidden Fallback-Projekt zeigt keine Informationen an.

PS: SuspenseList funktioniert nur auf Suspense oder SuspenseList Ebene , und funktioniert nicht auf den Enkelknoten.

Die Rolle von SuspenseList

SuspenseList ermöglicht es uns, eine zusammengesetzte Orchestrierung einer Gruppe von Suspense -Verhalten durchzuführen. Obwohl die Demo in der Demonstration relativ einfach ist, verwenden wir in einem relativ großen Projekt häufig Layout für das Layout. Nehmen Sie als Beispiel unsere gemeinsamen Middle- und Back-End-Managementplattformen und die C-seitige Hauptseite.

In mittleren und Back-End-Systemen verwenden wir häufig die Layoutmethode „Top-Leiste + Seitenleiste + Hauptseite“. Auf dieser Ebene praktiziert die aktuelle Branche in der Branche hauptsächlich Micro-Front-End-Routinen, wie z. B. qiankun.js Das Autorenteam hat eine Reihe eigener Mikro-Frontend-Implementierungssysteme erkundet. Wenn Sie sich auf einer C-Seite befinden, ist die Verwendung einer Micro-Front-End-Methode möglicherweise nicht geeignet. Wenn auf der Seite Anforderungen für das Rendern mehrerer Blöcke bestehen, können Sie SuspenseList und Suspense in Kombination mit der Fähigkeit des React-Backends verwenden um SSR zu rendern, um ein unabhängigeres Block-Rendering auf systematischere Weise zu erreichen. Auswirkungen auf die Ladereihenfolge und das Verhalten.