Rumah  >  Artikel  >  hujung hadapan web  >  queueMacroTask dalam kod sumber React

queueMacroTask dalam kod sumber React

Linda Hamilton
Linda Hamiltonasal
2024-10-03 06:41:01288semak imbas

Dalam artikel ini, kami menganalisis queueMacroTask dalam kod sumber React.

queueMacroTask in React source code

Walaupun, fail dan fungsi dinamakan sebagai enqueueTask, ia diimport sebagai queueMacroTask. Tidak seperti window.queueMicroTask, tiada fungsi seperti window.queueMarcoTask. setTimeout ialah contoh MacroTask.

Baca lebih lanjut tentang gelung acara, tugas mikro dan tugas makro.

enqueueTask React:

/**
 * Copyright © Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
let didWarnAboutMessageChannel = false;
let enqueueTaskImpl = null;
export default function enqueueTask(task: () => void): void {
   if (enqueueTaskImpl === null) {
     try {
       // read require off the module object to get around the bundlers.
       // we don't want them to detect a require and bundle a Node polyfill.
       const requireString = ('require' + Math.random()).slice(0, 7);
       // $FlowFixMe[invalid-computed-prop]
       const nodeRequire = module && module[requireString];
       // assuming we're in node, let's try to get node's
       // version of setImmediate, bypassing fake timers if any.
       enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;
       } catch (_err) {
       // we're in a browser
       // we can't use regular timers because they may still be faked
       // so we try MessageChannel+postMessage instead
       enqueueTaskImpl = function (callback: () => void) {
       if (__DEV__) {
         if (didWarnAboutMessageChannel === false) {
           didWarnAboutMessageChannel = true;
           if (typeof MessageChannel === 'undefined') {
             console.error(
             'This browser does not have a MessageChannel implementation, ' +
             'so enqueuing tasks via await act(async () => …) will fail. ' +
             'Please file an issue at https://github.com/facebook/react/issues ' +
             'if you encounter this warning.',
             );
           }
         }
       }
       const channel = new MessageChannel();
       channel.port1.onmessage = callback;
       channel.port2.postMessage(undefined);
     };
   }
  }
  return enqueueTaskImpl(task);
}

Kod ini mempunyai ulasan yang menerangkan fungsinya. Terdapat beberapa helah yang boleh kami pelajari di sini:

  • Cara mengelilingi bundler apabila anda menulis trask enqueque anda sendiri.

  • Dalam nod env, setImmediate boleh digunakan sebagai MacroTask.

  • Dalam env pelayar, MessageChannel boleh digunakan untuk mencipta kesan queueMacroTask.

enquequeTask ini diimport sebagai MacroTask dalam ReactAct.js dan digunakan sebagai sandaran sekiranya window.queueMicroTask tidak wujud:

queueMacroTask in React source code

Pada baris berikut:

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

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

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://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L366
  • https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js
  • 3. https://javascript.info/event-loop





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

Kenyataan:
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