Rumah > hujung hadapan web > tutorial js > Penggunaan MessageChannel dalam kod sumber React

Penggunaan MessageChannel dalam kod sumber React

Patricia Arquette
Lepaskan: 2024-10-04 06:20:02
asal
705 orang telah melayarinya

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

MessageChannel usage in React source code

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


Salin selepas log masuk

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


Salin selepas log masuk

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.

MessageChannel usage in React source code

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan