Comment démarrer rapidement avec VUE3.0 : découvrez
Cette fonctionnalité est apparue dans les versions historiques de React. La première fois était la version 16.6, qui a publié le composant Suspense qui prend en charge le fractionnement de code. L'extraction de données est désormais prise en charge dans la version 16.9. Les étudiants intéressés peuvent accéder au changelog de React .
a déjà été introduite. Nous utilisons uniquement un exemple pour revoir le concept et utiliser
// Ce composant est chargé dynamiquement const OtherComponent = React.lazy(() => import('./OtherComponent'));
fonction MonComposant() {
retour (
<React.Suspense fallback={<Spinner />}>
<div>
<AutreComposant />
</div>
</React.Suspense>
);
} Lorsque le composant OtherComponent n'a pas encore de conditions de rendu, le composant transmis par fallback sera utilisé pour le rendu préfabriqué. Les manifestations spécifiques du manque de conditions de rendu ici sont que le temps d'acquisition des données est long, la structure des composants est complexe, etc., mais nous ne voulons pas que cela affecte le rendu du premier écran ou l'initialisation de l'application. L'article précédent Suspense . l'a introduit, je n'entrerai donc pas dans les détails.
peut être facilement compris littéralement. Autrement dit, s'il y a plusieurs Suspense dans notre code, comment devrions-nous contrôler leur ordre d'affichage et leur méthode d'affichage ? Par conséquent, React nous fournit officiellement le composant SuspenseList .
<SuspenseList révélationOrder="forwards">
<Suspense fallback={'Chargement...'}>
<IDProfilePicture={1} />
</Suspense>
<Suspense fallback={'Chargement...'}>
<IDProfilePicture={2} />
</Suspense>
<Suspense fallback={'Chargement...'}>
<IDProfilePicture={3} />
</Suspense>
...
</SuspenseList> Commençons par présenter les deux seuls Props de SuspenseList
revealOrder représente l'ordre de chargement des sous Suspense . Les valeurs facultatives sont forwards , backwards together
forwards représentent le même niveau. vers l'arrière, quelle que soit la vitesse de la demande. L'affichage en arrière en premier
backwards à l'opposé de l'avant.
together signifie que tous les suspens sont affichés en même temps lorsqu'ils sont prêts, au lieu de les afficher un par un,tail précise comment afficher le comportement de. éléments déchargés dans SuspenseList
collapsed
SuspenseList la liste
projet déchargé hidden de secours n'affichera aucune information.
PS : SuspenseList ne fonctionne que sur Suspense ou SuspenseList du sous-niveau direct. , et ne fonctionnera pas sur les nœuds petits-enfants.
SuspenseList nous permet d'effectuer une orchestration composite d'un groupe de comportements Suspense Bien que la démo de la démonstration soit relativement simple, dans un projet relativement volumineux, nous utilisons souvent Layout pour la mise en page. Prenons comme exemple nos plates-formes communes de gestion middle et back-end et la page principale du côté C.
Dans les systèmes middle et back-end, nous utilisons souvent la méthode de mise en page barre supérieure + barre latérale + page principale. À ce niveau, l'industrie actuelle pratique principalement des routines micro-front-end, telles que qiankun.js , y compris le. L'équipe de l'auteur a exploré un ensemble de son propre système de mise en œuvre micro-frontal. Si vous êtes sur une page côté C, il n'est peut-être pas approprié d'utiliser une méthode micro-frontale. S'il existe des exigences de rendu multibloc dans la page, vous pouvez utiliser SuspenseList et Suspense combinés avec la capacité du backend React. pour rendre SSR afin d'obtenir un rendu de bloc indépendant de manière plus systématique. Effets de l'ordre de chargement et du comportement.