queueMicroTask in JavaScript

In diesem Artikel analysieren wir die queueMicroTask-Funktion im React-Quellcode

React verwendet queueMicroTask in einer Datei namens ReactAct.js. Dies ist eine öffentliche API, act.

act ist ein Testhelfer, um ausstehende React-Updates anzuwenden, bevor Behauptungen aufgestellt werden.

await act(async actFn)

ReactAct.js hat viel Code, beschränken wir unseren Fokus auf queueMicroTask.

Wo wird queueMicroTask in ReactAct.js aufgerufen?

queueSeveralMicrotasks befindet sich am Ende dieser ReactAct.js-Datei und ruft queueMicroTask mit einem Rückruf auf und enthält einen detaillierten Kommentar, der seinen Zweck erläutert.

queueSeveralMicrotasks wird an zwei Stellen aufgerufen:

• 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(() => …)',
   );
   }
 });
}

Da wir nun gesehen haben, wie queueMicroTask verwendet wird, wollen wir nun die Definition von queueMicroTask verstehen.

queueMicroTask

Die queueMicrotask()-Methode der Window-Schnittstelle stellt eine Mikrotask in die Warteschlange, die zu einem sicheren Zeitpunkt ausgeführt werden soll, bevor die Steuerung zur Ereignisschleife des Browsers zurückkehrt.

Die Mikrotask ist eine kurze Funktion, die ausgeführt wird, nachdem die aktuelle Aufgabe ihre Arbeit abgeschlossen hat und wenn kein anderer Code auf die Ausführung wartet, bevor die Kontrolle über den Ausführungskontext an die Ereignisschleife des Browsers zurückgegeben wird.

Dadurch kann Ihr Code ausgeführt werden, ohne anderen ausstehenden Code mit möglicherweise höherer Priorität zu beeinträchtigen, jedoch bevor der Browser die Kontrolle über den Ausführungskontext wiedererlangt, möglicherweise abhängig von der Arbeit, die Sie erledigen müssen.

Lesen Sie mehr über queueMicroTask bei MDN Docs.

Beispiel:

Hier ist ein Beispiel dafür, wie Mikrotasks und Makrotasks mit der Ausführung des Browsers interagieren:

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

Aufschlüsselung:

Der synchrone Code wird zuerst ausgeführt und gibt Folgendes aus:

„Synchron 1“

„Synchron 2“

„Synchron 3“

Bevor der Browser ausstehende Rendering- oder Makrotasks verarbeiten kann, wird die Mikrotask-Warteschlange verarbeitet:

Der Promise.resolve().then(…)-Rückruf wird zur Mikrotask-Warteschlange hinzugefügt und direkt nach Abschluss des synchronen Codeblocks ausgeführt. Protokolliert wird:

„Mikroaufgabe 1“

Nachdem die Mikrotask-Warteschlange geleert wurde, erlangt der Browser wieder die Kontrolle und kann:

Führen Sie Makrotasks wie den setTimeout-Rückruf aus, der Folgendes protokolliert:

„Makroaufgabe 1“

Endgültige Ausgabe

Synchronous 1
Synchronous 2
Synchronous 3
Microtask 1
Macrotask 1

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

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

Das obige ist der detaillierte Inhalt vonqueueMicroTask in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!