Penggunaan MessageChannel dalam kod sumber React

Dalam artikel ini, kami menganalisis penggunaan MessageChannel dalam kod sumber React.

Mari kita fahami apa itu MessageChannel.

Saluran Mesej

Antaramuka MessageChannel API Pemesejan Saluran membolehkan kami membuat saluran mesej baharu dan menghantar data melaluinya melalui dua sifat MessagePortnya.

Contoh

Contoh berikut ini dipilih daripada dokumen MDN, anda boleh melihat saluran baharu dibuat menggunakan pembina MessageChannel().

Apabila IFrame telah dimuatkan, kami mendaftarkan pengendali onmessage untuk MessageChannel.port1 dan memindahkan MessageChannel.port2 ke IFrame menggunakan kaedah window.postMessage bersama-sama dengan mesej.

Apabila mesej diterima semula daripada IFrame, fungsi onMessage mengeluarkan mesej kepada perenggan.

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

Baiklah, sekarang setelah kita memahami asas MessageChannel, mari pelajari penggunaannya dalam kod sumber React.

Penggunaan MessageChannel dalam kod sumber React:

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

Begini cara React menggunakannya:

• Buat contoh MessageChannel baharu: React mencipta MessageChannel baharu dengan dua port komunikasi.

• Jadualkan tugas menggunakan postMessage: React menggunakan port2.postMessage(undefined) untuk mencetuskan tugasan secara tidak segerak tanpa kelewatan atau gangguan yang mungkin berlaku dengan setTimeout atau setImmediate.

• Laksanakan tugas apabila onmessage dicetuskan: Tugas (iaitu panggilan balik yang dihantar ke enqueueTask) dilaksanakan apabila port1.onmessage menerima mesej yang disiarkan.

Mengapa tidak menggunakan setTimeout atau setImmediate? Kod tindak balas menunjukkan bahawa mereka ingin mengelak daripada menggunakan setTimeout atau setImmediate dalam persekitaran penyemak imbas kerana ia tidak sentiasa tepat dan boleh dipengaruhi oleh pendikitan, persekitaran ujian atau pengoptimuman lain (seperti pemasa palsu dalam persekitaran ujian). React mahukan kawalan yang baik ke atas penjadualan, terutamanya apabila ia berkaitan dengan pemaparan tak segerak dan kemas kini.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar konsep seni bina asas kod lanjutan yang digunakan dalam projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Tingkatkan kemahiran pasukan anda dengan kursus lanjutan kami berdasarkan seni bina pangkalan kod. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

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

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

Atas ialah kandungan terperinci Penggunaan MessageChannel dalam kod sumber React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!