В этой статье мы анализируем использование MessageChannel в исходном коде React.

Давайте сначала разберемся, что такое MessageChannel.

Канал сообщения

Интерфейс MessageChannel API Channel Messaging позволяет нам создавать новый канал сообщений и отправлять данные через него через два его свойства MessagePort.

Пример

Следующий пример взят из документации MDN. Вы можете увидеть, как новый канал создается с помощью конструктора MessageChannel().

Когда IFrame загрузился, мы регистрируем обработчик onmessage для MessageChannel.port1 и передаем MessageChannel.port2 в IFrame с помощью метода window.postMessage вместе с сообщением.

Когда сообщение получено обратно из IFrame, функция onMessage выводит сообщение в абзац.

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

Хорошо, теперь, когда мы понимаем основы MessageChannel, давайте изучим его использование в исходном коде React.

Использование MessageChannel в исходном коде React:

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

Вот как это использует React:

• Создайте новый экземпляр MessageChannel: React создает новый MessageChannel с двумя коммуникационными портами.

• Запланируйте задачу с помощью postMessage: React использует port2.postMessage(undefined) для асинхронного запуска задачи без задержек или помех, которые могут возникнуть с помощью setTimeout или setImmediate.

• Выполнить задачу при срабатывании onmessage: задача (которая представляет собой обратный вызов, передаваемый в enqueueTask) выполняется, когда port1.onmessage получает опубликованное сообщение.

Почему бы не использовать setTimeout или setImmediate? Код React намекает, что они хотят избегать использования setTimeout или setImmediate в средах браузера, поскольку они не всегда точны и на них могут повлиять регулирование, среды тестирования или другие оптимизации (например, поддельные таймеры в тестовых средах). React требует точного контроля над планированием, особенно когда дело касается асинхронного рендеринга и обновлений.

О нас:

В Think Throo мы стремимся обучать передовым архитектурным концепциям кодовой базы, используемым в проектах с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (дайте нам звезду!)

Повышайте квалификацию своей команды с помощью наших продвинутых курсов, основанных на архитектуре кодовой базы. Свяжитесь с нами по адресу [email protected], чтобы узнать больше!

Ссылки:

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

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