इस आलेख में, हम रिएक्ट स्रोत कोड में MessageChannel उपयोग का विश्लेषण करते हैं।

आइए पहले समझें कि मैसेजचैनल क्या है।

संदेशचैनल

चैनल मैसेजिंग एपीआई का मैसेजचैनल इंटरफ़ेस हमें एक नया संदेश चैनल बनाने और इसके दो मैसेजपोर्ट गुणों के माध्यम से डेटा भेजने की अनुमति देता है।

उदाहरण

यह निम्नलिखित उदाहरण एमडीएन दस्तावेज़ों से लिया गया है, आप MessageChannel() कंस्ट्रक्टर का उपयोग करके एक नया चैनल बनाते हुए देख सकते हैं।

जब IFrame लोड हो जाता है, तो हम MessageChannel.port1 के लिए एक onmessage हैंडलर पंजीकृत करते हैं और एक संदेश के साथ window.postMessage विधि का उपयोग करके MessageChannel.port2 को IFrame पर स्थानांतरित करते हैं।

जब कोई संदेश 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 की मूल बातें समझ गए हैं, तो आइए रिएक्ट सोर्स कोड में इसका उपयोग सीखें।

रिएक्ट स्रोत कोड में MessageChannel का उपयोग:

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

यहां बताया गया है कि रिएक्ट इसका उपयोग कैसे करता है:

• एक नया MessageChannel इंस्टेंस बनाएं: रिएक्ट दो संचार पोर्ट के साथ एक नया MessageChannel बनाता है।

• पोस्टमैसेज का उपयोग करके किसी कार्य को शेड्यूल करें: सेटटाइमआउट या सेटइमीडिएट के साथ होने वाली देरी या हस्तक्षेप के बिना किसी कार्य को अतुल्यकालिक रूप से ट्रिगर करने के लिए रिएक्ट port2.postMessage(अपरिभाषित) का उपयोग करता है।

• onmessage ट्रिगर होने पर कार्य निष्पादित करें: कार्य (जो enqueueTask को पास किया गया कॉलबैक है) तब निष्पादित होता है जब port1.onmessage को पोस्ट किया गया संदेश प्राप्त होता है।

सेटटाइमआउट या सेटइमीडिएट का उपयोग क्यों नहीं किया जाता? रिएक्ट कोड संकेत देता है कि वे ब्राउज़र वातावरण में सेटटाइमआउट या सेटइमीडिएट का उपयोग करने से बचना चाहते हैं क्योंकि वे हमेशा सटीक नहीं होते हैं और थ्रॉटलिंग, परीक्षण वातावरण या अन्य अनुकूलन (जैसे परीक्षण वातावरण में नकली टाइमर) से प्रभावित हो सकते हैं। रिएक्ट शेड्यूलिंग पर अच्छा नियंत्रण चाहता है, खासकर जब एसिंक्रोनस रेंडरिंग और अपडेट की बात आती है।

हमारे बारे में:

थिंक थ्रू में, हम ओपन-सोर्स परियोजनाओं में उपयोग की जाने वाली उन्नत कोडबेस वास्तुशिल्प अवधारणाओं को सिखाने के मिशन पर हैं।

नेक्स्ट.जेएस/रिएक्ट में उन्नत वास्तुशिल्प अवधारणाओं का अभ्यास करके अपने कोडिंग कौशल को 10 गुना करें, सर्वोत्तम प्रथाओं को सीखें और उत्पादन-ग्रेड परियोजनाओं का निर्माण करें।

हम खुले स्रोत हैं - 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