Neste artigo, analisamos o uso do MessageChannel no código-fonte do React.

Vamos primeiro entender o que é um MessageChannel.

Canal de mensagem

A interface MessageChannel da API Channel Messaging nos permite criar um novo canal de mensagens e enviar dados através dele por meio de suas duas propriedades MessagePort.

Exemplo

Este exemplo a seguir foi retirado dos documentos do MDN, você pode ver um novo canal sendo criado usando o construtor MessageChannel().

Quando o IFrame é carregado, registramos um manipulador onmessage para MessageChannel.port1 e transferimos MessageChannel.port2 para o IFrame usando o método window.postMessage junto com uma mensagem.

Quando uma mensagem é recebida de volta do IFrame, a função onMessage gera a mensagem em um parágrafo.

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

Ok, agora que entendemos o básico do MessageChannel, vamos aprender seu uso no código-fonte do React.

Uso de MessageChannel no código-fonte do React:

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

Veja como o React o usa:

• Crie uma nova instância MessageChannel: React cria um novo MessageChannel com duas portas de comunicação.

• Agende uma tarefa usando postMessage: React usa port2.postMessage(indefinido) para acionar uma tarefa de forma assíncrona, sem os atrasos ou interferências que podem ocorrer com setTimeout ou setImmediate.

• Executar a tarefa quando onmessage for acionado: A tarefa (que é o retorno de chamada passado para enqueueTask) é executada quando port1.onmessage recebe a mensagem postada.

Por que não usar setTimeout ou setImmediate? O código React sugere que eles desejam evitar o uso de setTimeout ou setImmediate em ambientes de navegador porque eles nem sempre são precisos e podem ser afetados por limitação, ambientes de teste ou outras otimizações (como temporizadores falsificados em ambientes de teste). O React deseja um controle preciso sobre o agendamento, especialmente quando se trata de renderização e atualizações assíncronas.

Sobre nós:

No Think Throo, temos a missão de ensinar os conceitos avançados de arquitetura de base de código usados ​​em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Aprimore sua equipe com nossos cursos avançados baseados na arquitetura de base de código. Entre em contato conosco em [email protected] para saber mais!

Referências:

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

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