queueMacroTask dalam kod sumber React

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

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:

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!