Pintas pengesanan pengikat bagi pernyataan keperluan

Dalam artikel ini, kami menganalisis cara kod sumber React memintas pengesanan penyataan keperluan pengikat.

Dengan menggabungkan rentetan "require" dengan nombor rawak (Math.random()), kod tersebut menghasilkan rentetan yang kelihatan seperti "require", tetapi tidak dapat dikenali secara langsung oleh bundler semasa analisis statik. Rentetan itu kemudiannya dihiris untuk mendapatkan 7 aksara pertama, memastikan bahawa hasilnya sentiasa "memerlukan" (memandangkan "memerlukan" Math.random() akan menghasilkan sesuatu seperti "memerlukan0.123456", yang dihiris kepada "memerlukan") .

Semua masalah ini untuk menggunakan MacroTask dipanggil setImmediate yang tersedia dalam persekitaran Node.

setImmediate

Apabila anda ingin melaksanakan beberapa kod secara tidak segerak,

tetapi secepat mungkin, satu pilihan ialah menggunakan fungsi setImmediate() yang disediakan oleh Node.js:

setImmediate(() => {
 // run something
});

Sebarang fungsi yang diluluskan sebagai argumen setImmediate() ialah panggilan balik yang dilaksanakan dalam lelaran seterusnya bagi gelung acara.

Baca lebih lanjut tentang setImmediate di Nodejs Docs.

Mengapa mengelakkan pengikat mengesan memerlukan?

Persekitaran penyemak imbas tidak memerlukan modul Node.js:

React perlu membezakan antara persekitaran Node.js (di mana setImmediate digunakan) dan persekitaran penyemak imbas (di mana MessageChannel digunakan). Jika pengikat mengesan keperluan, ia mungkin memasukkan poliisi Node.js secara automatik dalam himpunan penyemak imbas, yang tidak diperlukan dan boleh menambah kod.

Elakkan kemasukan poliisi secara tidak sengaja:

Bundel, seperti Webpack, selalunya menyertakan polyfill untuk API Node.js apabila ia mengesan keperluan. Ini bermasalah untuk pustaka ringan seperti React, di mana poliisi sedemikian tidak diperlukan dan mungkin mengganggu logik React sendiri untuk mengendalikan persekitaran (pelayar lwn. Node.js).

enqueueTask ini ialah kaedah sandaran yang digunakan dalam ReactAct.js

// $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;

pemasa ialah modul teras dalam Node.js. Ia menyediakan satu set fungsi pemasa yang boleh digunakan untuk menjadualkan pelaksanaan kod pada selang waktu tertentu atau selepas kelewatan. Fungsi ini adalah serupa dengan fungsi pemasa global dalam

JavaScript (seperti setTimeout dan setInterval), tetapi ia disediakan sebagai sebahagian daripada modul pemasa untuk kawalan dan ketepatan tambahan.

<p>nodeRequire.call(module, 'timers')</p>

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://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L23

2. https://nodejs.org/en/learn/asynchronous-work/understanding-setimmediate

3. https://nodejs.org/api/timers.html#setimmediatecallback-args

Atas ialah kandungan terperinci Pintas pengesanan pengikat bagi pernyataan keperluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!