Piles et files d’attente expliquées avec des exemples React et Node.js

La plupart des développeurs découvrent les piles et les files d’attente une fois, réussissent l’examen, puis les oublient. Ils ressemblent à des « trucs d’entretien » utiles pour un tableau blanc, inutiles au travail.

Cette croyance est fausse.

Si vous avez déjà créé un bouton d’annulation, appuyé sur un bouton de retour, planifié un e-mail en arrière-plan ou vous êtes demandé pourquoi votre (setTimeout) s’est exécuté après votre (Promesse), vous avez déjà utilisé des piles et des files d’attente. Vous ne les avez tout simplement pas appelés par leur nom.

Cet article vous montre les endroits réels où ces deux structures de données apparaissent dans le travail quotidien de React et Node.js. Pas de théorie lourde, de nombreux exemples et du code que vous pouvez réellement utiliser.

Un rappel de deux minutes (sans jargon)

Avant les cas d’usage, voici toute la théorie dont vous avez besoin.

UN empiler fonctionne comme une pile d’assiettes. Vous ajoutez une assiette sur le dessus et vous enlevez une assiette sur le dessus. Le dernier élément que vous insérez est le premier que vous retirez. Ceci s’appelle LIFOqui signifie Dernier entré, premier sorti.

UN file d’attente fonctionne comme une file d’attente dans un café. La première personne à rejoindre la file est la première personne servie. Le premier élément que vous insérez est le premier que vous retirez. Ceci s’appelle FIFOqui signifie Premier entré, premier sorti.

C’est toute l’idée. Une pile inverse la commande ; une file d’attente maintient l’ordre. Tout ce qui suit n’est que ces deux règles appliquées à des problèmes réels.

Empiler les cas d’utilisation dans React

1. Annuler et refaire (le classique)

Chaque éditeur doit annuler et refaire, qu’il s’agisse d’une application de notes, d’un générateur de formulaires ou d’un outil de dessin. Une pile est la solution naturelle.

Vous conservez deux piles. L’un contient les états passés (la pile « annuler »). L’une contient les états que vous avez annulés (la pile « refaire »). Lorsque l’utilisateur apporte une modification, vous transférez l’ancien état sur la pile d’annulation. Lorsqu’ils cliquent sur Annuler, vous supprimez l’état supérieur et le déplacez vers la pile de rétablissement.

Voici un petit exemple fonctionnel utilisant un hook React :

Notez les opérations de pile : push (ajouter à la fin du tableau) et pop (supprimer à la fin). Ce comportement du « dernier entré, premier sorti » est exactement ce qui rend l’annulation naturelle, car vous annulez toujours la chose la plus récente en premier.

2. Historique de navigation et bouton Retour

Pensez au fonctionnement du bouton Précédent du navigateur. Chaque page que vous visitez est placée sur une pile. Lorsque vous appuyez en arrière, la page actuelle disparaît et vous atterrissez sur la précédente.

Les applications React qui utilisent le routage côté client reconstruisent cette idée. Un assistant ou un formulaire en plusieurs étapes conserve souvent une pile d’étapes visitées, de sorte que le bouton « retour » renvoie l’utilisateur à l’étape exacte d’où il vient, et pas seulement au numéro d’étape moins un.

3. Modaux empilés et superpositions

Ouvrez un modal. De l’intérieur, ouvrez une boîte de dialogue de confirmation. Maintenant, appuyez sur Échap. Lequel devrait fermer ? Celui du haut. Puis Escape ferme à nouveau le suivant. C’est une pile.

Garder les modaux ouverts dans une pile vous permet de les fermer dans le bon ordre et de gérer proprement le focus et le z-index. Chaque nouveau modal est placé en haut ; chaque évasion ou fermeture fait apparaître celui du haut.

Cas d’utilisation de la file d’attente dans React (et le navigateur)

4. La boucle d’événements : microtâches et macrotâches

Voici une question qui déroute de nombreux développeurs. Qu’est-ce que cela imprime ?

La réponse est (1), (4), (3), (2), pas (1), (2), (4), (3)

La raison, ce sont les files d’attente. JavaScript a deux files d’attente importantes. La file d’attente des macrotâches contient des éléments tels que les rappels (setTimeout). Le file d’attente de microtâches contient des éléments tels que les rappels résolus (Promesse). Une fois le code principal exécuté, le moteur vide d’abord toute la file d’attente des microtâches, puis prend une macrotâche.

Ainsi, 3 (une microtâche) devance 2 (une macrotâche), même si setTimeout a été écrit en premier. Les deux files d’attente sont FIFO, premier entré, premier sorti, mais la file d’attente des microtâches a une priorité plus élevée. Comprendre cette idée unique corrige un grand nombre de bogues « pourquoi mon code s’est-il exécuté dans le mauvais ordre ».

5. Animation et mise à jour par lots

React batch met à jour l’état et les traite dans l’ordre plutôt que de les restituer sur chaque setState. Les animations du navigateur fonctionnent de la même manière via requestAnimationFrame, qui aligne les rappels à exécuter avant la prochaine peinture. Dans les deux cas, le travail est ajouté à une file d’attente et traité dans l’ordre dans lequel il est arrivé, ce qui permet à l’interface utilisateur de rester fluide au lieu d’être saccadée.