Verwendung von MessageChannel im React-Quellcode

In diesem Artikel analysieren wir die MessageChannel-Nutzung im React-Quellcode.

Lassen Sie uns zunächst verstehen, was ein MessageChannel ist.

MessageChannel

Die MessageChannel-Schnittstelle der Channel Messaging API ermöglicht es uns, einen neuen Nachrichtenkanal zu erstellen und über seine beiden MessagePort-Eigenschaften Daten darüber zu senden.

Beispiel

Das folgende Beispiel stammt aus MDN-Dokumenten. Sie können sehen, wie ein neuer Kanal mit dem MessageChannel()-Konstruktor erstellt wird.

Wenn der IFrame geladen ist, registrieren wir einen Onmessage-Handler für MessageChannel.port1 und übertragen MessageChannel.port2 mithilfe der window.postMessage-Methode zusammen mit einer Nachricht an den IFrame.

Wenn eine Nachricht vom IFrame zurückempfangen wird, gibt die onMessage-Funktion die Nachricht in einem Absatz aus.

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;
  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
   channel.port2,
  ]);
}
// Handle messages received on port1
function onMessage(e) {
 output.innerHTML = e.data;
}

Okay, da wir nun die Grundlagen von MessageChannel verstanden haben, lernen wir seine Verwendung im React-Quellcode kennen.

MessageChannel-Verwendung im React-Quellcode:

const channel = new MessageChannel();
channel.port1.onmessage = callback;
channel.port2.postMessage(undefined);

So verwendet React es:

• Erstellen Sie eine neue MessageChannel-Instanz: React erstellt einen neuen MessageChannel mit zwei Kommunikationsports.

• Planen Sie eine Aufgabe mit postMessage: React verwendet port2.postMessage(undefiniert), um eine Aufgabe asynchron auszulösen, ohne die Verzögerungen oder Störungen, die bei setTimeout oder setImmediate auftreten könnten.

• Führen Sie die Aufgabe aus, wenn onmessage ausgelöst wird: Die Aufgabe (die der an enqueueTask übergebene Rückruf ist) wird ausgeführt, wenn port1.onmessage die gepostete Nachricht empfängt.

Warum nicht setTimeout oder setImmediate verwenden? React-Code weist darauf hin, dass die Verwendung von setTimeout oder setImmediate in Browserumgebungen vermieden werden soll, da diese nicht immer präzise sind und durch Drosselung, Testumgebungen oder andere Optimierungen (z. B. gefälschte Timer in Testumgebungen) beeinträchtigt werden können. React möchte eine genaue Kontrolle über die Planung, insbesondere wenn es um asynchrones Rendering und Aktualisierungen geht.

Ü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:

• https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L42

Das obige ist der detaillierte Inhalt vonVerwendung von MessageChannel im React-Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!