في هذه المقالة، نقوم بتحليل استخدام messageChannel في الكود المصدري لـ React.

دعونا أولاً نفهم ما هي قناة الرسائل.

قناة الرسائل

تتيح لنا واجهة messageChannel الخاصة بواجهة برمجة تطبيقات 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.

استخدام قناة الرسائل في كود مصدر React:

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

إليك كيفية استخدام React لها:

• أنشئ نسخة جديدة لقناة الرسائل: تقوم React بإنشاء قناة رسائل جديدة بمنفذي اتصال.

• جدولة مهمة باستخدام postMessage: يستخدم React port2.postMessage(undef) لتشغيل مهمة بشكل غير متزامن دون التأخير أو التداخلات التي قد تحدث مع setTimeout أو setImmediate.

• تنفيذ المهمة عند تشغيل onmessage: يتم تنفيذ المهمة (وهي رد الاتصال الذي تم تمريره إلى enqueueTask) عندما يتلقى port1.onmessage الرسالة المنشورة.

لماذا لا تستخدم setTimeout أو setImmediate؟ يشير رمز React إلى أنهم يريدون تجنب استخدام setTimeout أو setImmediate في بيئات المتصفح لأنها ليست دقيقة دائمًا ويمكن أن تتأثر بالتقييد أو بيئات الاختبار أو التحسينات الأخرى (مثل الموقتات المزيفة في بيئات الاختبار). تريد React التحكم الدقيق في الجدولة، خاصة عندما يتعلق الأمر بالعرض والتحديثات غير المتزامنة.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم المفاهيم المعمارية لقاعدة التعليمات البرمجية المتقدمة المستخدمة في المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في 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