queueMicroTask dalam JavaScript

Dalam artikel ini, kami menganalisis fungsi queueMicroTask dalam kod sumber React

React menggunakan queueMicroTask dalam fail bernama ReactAct.js. Ini adalah API awam, bertindak.

act ialah pembantu ujian untuk memohon kemas kini React yang belum selesai sebelum membuat penegasan.

await act(async actFn)

ReactAct.js mempunyai banyak kod, mari kita kecilkan tumpuan kita kepada queueMicroTask.

Di manakah queueMicroTask dipanggil dalam ReactAct.js?

queueSeveralMicrotasks ditemui pada penghujung fail ReactAct.js ini dan memanggil queueMicroTask dengan panggilan balik dan mempunyai ulasan terperinci yang menerangkan tujuannya.

queueSeveralMicrotasks didapati dipanggil di dua tempat:

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L121

// Warn if the an `act` call with an async scope is not awaited. In a
 // future release, consider making this an error.
 queueSeveralMicrotasks(() => {
   if (!didAwaitActCall && !didWarnNoAwaitAct) {
     didWarnNoAwaitAct = true;
     console.error(
       'You called act(async () => …) without await. ' +
       'This could lead to unexpected testing behaviour, ' +
       'interleaving multiple act calls and mixing their ' +
       'scopes. ' +
       'You should - await act(async () => …);',
     );
   }
 });

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L196

// Warn if something suspends but the `act` call is not awaited.
// In a future release, consider making this an error.
if (queue.length !== 0) {
 queueSeveralMicrotasks(() => {
 if (!didAwaitActCall && !didWarnNoAwaitAct) {
   didWarnNoAwaitAct = true;
   console.error(
     'A component suspended inside an `act` scope, but the ' +
     '`act` call was not awaited. When testing React ' +
     'components that depend on asynchronous data, you must ' +
     'await the result:\n\n' +
     'await act(() => …)',
   );
   }
 });
}

Sekarang kita melihat cara queueMicroTask digunakan, mari kita fahami definisi queueMicroTask.

gilirMicroTask

Kaedah queueMicrotask() bagi antara muka Window membuat baris gilir microtask untuk dilaksanakan pada masa yang selamat sebelum mengawal kembali ke gelung acara penyemak imbas.

Microtask ialah fungsi pendek yang akan dijalankan selepas tugas semasa menyelesaikan kerjanya dan apabila tiada kod lain menunggu untuk dijalankan sebelum kawalan konteks pelaksanaan dikembalikan ke gelung acara penyemak imbas.

Ini membolehkan kod anda dijalankan tanpa mengganggu mana-mana kod lain yang berpotensi lebih tinggi, kod yang belum selesai, tetapi sebelum penyemak imbas mendapatkan semula kawalan ke atas konteks pelaksanaan, yang mungkin bergantung pada kerja yang perlu anda selesaikan.

Baca lebih lanjut mengenai queueMicroTask di MDN Docs.

Contoh:

Berikut ialah contoh cara tugasan mikro dan tugasan makro berinteraksi dengan pelaksanaan penyemak imbas:

console.log('Synchronous 1'); // 1
Promise.resolve().then(() => {
 console.log('Microtask 1'); // 3
});
console.log('Synchronous 2'); // 2
setTimeout(() => {
 console.log('Macrotask 1'); // 5
}, 0);
console.log('Synchronous 3'); // 4

Pecahan:

Kod segerak berjalan dahulu, mengeluarkan:

‘Segerak 1’

'Segerak 2'

'Segerak 3'

Sebelum penyemak imbas mendapat peluang untuk mengendalikan sebarang pemaparan atau tugasan makro yang belum selesai, baris gilir microtask diproses:

Panggil balik Promise.resolve().then(…) ditambahkan pada baris gilir microtask dan dilaksanakan sejurus selepas blok kod segerak selesai, log:

'Microtask 1'

Selepas baris gilir microtask dikosongkan, penyemak imbas memperoleh semula kawalan dan boleh:

Jalankan tugasan makro, seperti panggilan balik setTimeout, yang log:

‘Macrotask 1’

Keluaran akhir

Synchronous 1
Synchronous 2
Synchronous 3
Microtask 1
Macrotask 1

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:

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask

2. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L361

3. https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

4. https://react.dev/reference/react/act

5. https://javascript.info/event-loop

Atas ialah kandungan terperinci queueMicroTask dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!