queueMicroTask en JavaScript

Dans cet article, nous analysons la fonction queueMicroTask dans le code source de React

React utilise queueMicroTask dans un fichier nommé ReactAct.js. Il s'agit d'une API publique, agissez.

act est un assistant de test permettant d'appliquer les mises à jour React en attente avant de faire des assertions.

await act(async actFn)

ReactAct.js contient beaucoup de code, concentrons-nous sur queueMicroTask.

Où est appelé queueMicroTask dans ReactAct.js ?

queueSeveralMicrotasks se trouve à la fin de ce fichier ReactAct.js et appelle queueMicroTask avec un rappel et contient un commentaire détaillé expliquant son objectif.

queueSeveralMicrotasks est appelée à deux endroits :

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L121

// Warn if the an `act` call with an async scope is not awaited. In a
 // future release, consider making this an error.
 queueSeveralMicrotasks(() => {
   if (!didAwaitActCall && !didWarnNoAwaitAct) {
     didWarnNoAwaitAct = true;
     console.error(
       'You called act(async () => …) without await. ' +
       'This could lead to unexpected testing behaviour, ' +
       'interleaving multiple act calls and mixing their ' +
       'scopes. ' +
       'You should - await act(async () => …);',
     );
   }
 });

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L196

// Warn if something suspends but the `act` call is not awaited.
// In a future release, consider making this an error.
if (queue.length !== 0) {
 queueSeveralMicrotasks(() => {
 if (!didAwaitActCall && !didWarnNoAwaitAct) {
   didWarnNoAwaitAct = true;
   console.error(
     'A component suspended inside an `act` scope, but the ' +
     '`act` call was not awaited. When testing React ' +
     'components that depend on asynchronous data, you must ' +
     'await the result:\n\n' +
     'await act(() => …)',
   );
   }
 });
}

Maintenant que nous avons vu comment queueMicroTask est utilisé, comprenons maintenant la définition de queueMicroTask.

queueMicroTask

La méthode queueMicrotask() de l'interface Window met en file d'attente une microtâche à exécuter à un moment sûr avant le retour du contrôle à la boucle d'événements du navigateur.

La microtâche est une fonction courte qui s'exécutera une fois que la tâche en cours aura terminé son travail et lorsqu'aucun autre code n'attend d'être exécuté avant que le contrôle du contexte d'exécution ne soit renvoyé à la boucle d'événements du navigateur.

Cela permet à votre code de s'exécuter sans interférer avec tout autre code en attente, potentiellement de priorité plus élevée, mais avant que le navigateur ne reprenne le contrôle du contexte d'exécution, potentiellement en fonction du travail que vous devez effectuer.

En savoir plus sur queueMicroTask sur MDN Docs.

Exemple :

Voici un exemple de la façon dont les microtâches et les macrotâches interagissent avec l'exécution du navigateur :

console.log('Synchronous 1'); // 1
Promise.resolve().then(() => {
 console.log('Microtask 1'); // 3
});
console.log('Synchronous 2'); // 2
setTimeout(() => {
 console.log('Macrotask 1'); // 5
}, 0);
console.log('Synchronous 3'); // 4

Répartition :

Le code synchrone s'exécute en premier, produisant :

« Synchrone 1 »

« Synchrone 2 »

« Synchrone 3 »

Avant que le navigateur ait la possibilité de gérer les rendus ou les macrotâches en attente, la file d'attente des microtâches est traitée :

Le rappel Promise.resolve().then(…) est ajouté à la file d'attente des microtâches et est exécuté juste après la fin du bloc de code synchrone, en journalisant :

« Microtâche 1 »

Une fois la file d'attente des microtâches vidée, le navigateur reprend le contrôle et peut :

Exécutez des macrotâches, comme le rappel setTimeout, qui enregistre :

'Macrotâche 1'

Sortie finale

Synchronous 1
Synchronous 2
Synchronous 3
Microtask 1
Macrotask 1

À propos de nous :

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Développez les compétences de votre équipe avec nos cours avancés basés sur l'architecture de base de code. Contactez-nous à hello@thinkthroo.com pour en savoir plus !

Références :

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask

2. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L361

3. https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

4. https://react.dev/reference/react/act

5. https://javascript.info/event-loop

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!