Dans cet article, nous analysons l'utilisation de MessageChannel dans le code source de React.

Commençons par comprendre ce qu'est un MessageChannel.

Canal de messages

L'interface MessageChannel de l'API Channel Messaging nous permet de créer un nouveau canal de message et d'envoyer des données via celui-ci via ses deux propriétés MessagePort.

Exemple

Cet exemple suivant est tiré de la documentation MDN, vous pouvez voir un nouveau canal créé à l'aide du constructeur MessageChannel().

Une fois l'IFrame chargé, nous enregistrons un gestionnaire onmessage pour MessageChannel.port1 et transférons MessageChannel.port2 vers l'IFrame à l'aide de la méthode window.postMessage avec un message.

Lorsqu'un message est reçu de l'IFrame, la fonction onMessage affiche le message dans un paragraphe.

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;
}

D'accord, maintenant que nous comprenons les bases de MessageChannel, apprenons son utilisation dans le code source de React.

Utilisation de MessageChannel dans le code source de React :

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

Voici comment React l'utilise :

• Créez une nouvelle instance MessageChannel : React crée un nouveau MessageChannel avec deux ports de communication.

• Planifiez une tâche à l'aide de postMessage : React utilise port2.postMessage(undefined) pour déclencher une tâche de manière asynchrone sans les retards ou les interférences qui pourraient survenir avec setTimeout ou setImmediate.

• Exécuter la tâche lorsque onmessage est déclenché : la tâche (qui est le rappel transmis à enqueueTask) est exécutée lorsque port1.onmessage reçoit le message publié.

Pourquoi ne pas utiliser setTimeout ou setImmediate ? Le code React indique qu'ils souhaitent éviter d'utiliser setTimeout ou setImmediate dans les environnements de navigateur, car ils ne sont pas toujours précis et peuvent être affectés par la limitation, les environnements de test ou d'autres optimisations (telles que de fausses minuteries dans les environnements de test). React souhaite un contrôle précis sur la planification, en particulier en ce qui concerne le rendu et les mises à jour asynchrones.

À 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 créez 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 à [email protected] pour en savoir plus !

Références :

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

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