Apakah React Compiler?

Pengkompil React ialah pengkompil percubaan baharu yang menjanjikan untuk merevolusikan cara aplikasi React dioptimumkan untuk prestasi.

Anda boleh membaca dan mendengar artikel ini dalam format podcast di pautan Medium percuma ini.

Apakah Penyusun?

Ringkasnya, pengkompil ialah atur cara yang menterjemahkan satu bahasa pengaturcaraan (bahasa sumber) kepada bahasa lain (bahasa sasaran).

Pengkompil menterjemah bahasa sumber kepada bahasa sasaran

Sebagai contoh, JSX dan TSX disusun ke dalam JavaScript (dengan Babel atau yang lain) untuk penyemak imbas memahami kod tersebut.

Mengapa Pengkompil Reaksi Baharu?

Salah satu sebab utama yang saya dengar ialah Pengoptimuman Prestasi.

Kadangkala, aplikasi React mengalami pemaparan semula yang tidak perlu, yang membawa kepada isu prestasi.
Pembangun boleh mengoptimumkan kod menggunakan hafalan, panggil balik dan sebagainya. Tetapi selalunya ini diterjemahkan kepada komponen berantakan yang dipenuhi dengan panggilan hafalan.

Apakah penyelesaian React Compiler?

Secara ringkasnya, React Compiler harus mengoptimumkan kod anda secara automatik, mengurangkan keperluan untuk pengoptimuman prestasi manual.

Akibatnya, React Compiler harus meningkatkan responsif apl.

Mari kita mendalaminya.

Apakah React Compiler?

Pengkompil React ialah pengkompil percubaan yang sudah tersedia dalam React 18. Ia adalah, dan kemungkinan besar akan menjadi, alat pilihan walaupun dalam React 19.

Menggunakan React Compiler dalam React 18 memerlukan beberapa konfigurasi manual tetapi anda sudah boleh mencubanya.

React Compiler direka untuk berfungsi dalam ekosistem React 19

Pasang React Compiler

Walaupun React Compiler digunakan dalam pengeluaran di Instagram, ia adalah sumber terbuka sebagai beta dan tersedia di React 17 .

Pengkompil datang dengan pemalam eslint yang sangat disyorkan yang menunjukkan analisis pengkompil dalam editor.

Anda boleh menggunakan pemalam eslint walaupun anda tidak menggunakan React Compiler.

React Compiler Healthcheck

Sebelum memasang React Compiler adalah disyorkan untuk menyemak keserasian.

Jalankan arahan berikut:

npx react-compiler-healthcheck@beta

untuk mendapatkan keputusan seperti di bawah:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

Jumlah komponen terkumpul yang lebih tinggi adalah perkara yang baik. Itulah bilangan komponen yang boleh dioptimumkan dengan jayanya.

Mod Ketat saya tidak didayakan tetapi jika ini didayakan dan diikuti bermakna peluang yang lebih tinggi untuk Peraturan Reaksi dipatuhi.
Jadi kita mungkin perlu memastikannya didayakan.

Akhir sekali, react-compiler-healthcheck menyemak perpustakaan yang diketahui yang tidak serasi dengan pengkompil. Saya tidak mempunyai apa-apa, tetapi MobX akan memberi anda masalah. Ia tidak akan berfungsi.

Memasang React Compiler

Pasang React Compiler menggunakan npm:

npx react-compiler-healthcheck@beta

Atau, jika anda menggunakan Benang:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

Anda juga harus menambah pemalam eslint pada konfigurasi. Dalam kes saya, ia ialah fail .eslintrc.js.

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

Setelah pemalam eslint disediakan dengan betul, anda mungkin mendapat beberapa amaran tentang Peraturan Reaksi. Anda boleh mengemas kininya di tempat atau kemudian.

Satu-satunya perbezaan ialah dalam kes kedua, React melangkau mengoptimumkan komponen atau cangkuk itu.

Anda boleh membaca dan mendengar artikel ini dalam format podcast di pautan Medium percuma ini.

Atas ialah kandungan terperinci Apakah React Compiler?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!