Apakah perbezaan antara react dan webpack

Perbezaan: 1. React ialah rangka kerja JavaScript, manakala webpack ialah pembungkus modul statik untuk aplikasi JavaScript 2. React digunakan terutamanya untuk membina antara muka pengguna, manakala webpack boleh dimuat semula dan disusun untuk menyusun semua Semua statik; sumber digabungkan, dengan itu mengurangkan permintaan IO.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Apa itu reaksi

React ialah rangka kerja JavaScript untuk membina antara muka pengguna.

Kerangka: kod yang boleh digunakan semula. Semakin ramai yang menggunakannya, semakin terkenal, dan semakin ramai yang menggunakannya, semakin bernilai. (ketawa)

Angular sama terkenal dengan React.

React ialah perpustakaan JS yang digunakan untuk memaparkan UI, diposisikan untuk melaksanakan UI

Penyelesaian Apl Web React, dan React Native yang diterbitkan ialah penyelesaian Apl merentas skrin

Ciri:

• Reka bentuk deklaratif: paradigma deklaratif

• Cekap: gunakan VDOM untuk mengurangkan interaksi DOM

• Fleksibel: berfungsi dengan baik dengan perpustakaan atau rangka kerja yang diketahui

• JSX: bahasa bebas yang cuba menyelesaikan banyak kelemahan JS, ES6 termasuk hampir Semua ciri JSX

• Komponen: Penggunaan semula kod

• Aliran data tindak balas sehala: lebih mudah dan cepat daripada pengikatan dua hala.

Mengapa menggunakan React?

Kaedah tradisional kerap mengendalikan DOM, tetapi prestasinya tidak dapat memenuhi keperluan React menggunakan VDOM, yang mempunyai prestasi tinggi

Kos penyelenggaraan kod JS tradisional adalah tinggi, dan pembangunan berasaskan komponen React

perlu menyokong pembangunan mudah alih

Keburukan React:

• Untuk front-end tradisional yang telah menggunakan JS dan jQuery, React sangat tidak mesra

• React menekankan pengurusan komponen dan keadaan, dan pandangan dunianya ialah berorientasikan kepada bahasa pengaturcaraan

• Vue.js menekankan penyegerakan automatik pandangan, dan pandangan dunianya berorientasikan kepada skrip UI

• Kos pembelajaran React adalah lebih tinggi daripada Vue.js.

• React tidak mempunyai baldi keluarga, ia hanya mempunyai UI

Apa itu webpack

Pada asasnya, webpack ialah pengikat modul statik untuk aplikasi JavaScript moden. Apabila webpack memproses aplikasi, ia secara rekursif membina graf pergantungan yang mengandungi setiap modul yang diperlukan oleh aplikasi, dan kemudian membungkus semua modul ini ke dalam satu atau lebih berkas.

Webpack adalah seperti barisan pengeluaran Ia perlu melalui satu siri proses pemprosesan sebelum fail sumber boleh ditukar kepada hasil output. Setiap proses pemprosesan pada barisan pengeluaran ini mempunyai satu tanggungjawab, dan terdapat kebergantungan antara pelbagai proses Hanya selepas pemprosesan semasa selesai, ia boleh diserahkan kepada proses seterusnya untuk pemprosesan. Pemalam adalah seperti fungsi yang dimasukkan ke dalam barisan pengeluaran, memproses sumber pada barisan pengeluaran pada masa tertentu.

Webpack menggunakan Tapable untuk mengatur barisan pengeluaran yang kompleks ini. Webpack akan menyiarkan acara semasa proses berjalan Pemalam hanya perlu mendengar acara yang penting dan boleh menyertai barisan pengeluaran ini untuk menukar operasi barisan pengeluaran. Mekanisme aliran acara webpack memastikan keteraturan pemalam, menjadikan keseluruhan sistem sangat berskala.

proses membina webpack

Proses menjalankan Webpack ialah proses bersiri Proses berikut akan dilaksanakan dari mula hingga akhir:

• Parameter permulaan: Baca dan gabungkan parameter daripada fail konfigurasi dan pernyataan Shell untuk mendapatkan parameter akhir.

• Mulakan penyusunan: Mulakan objek Pengkompil dengan parameter yang diperoleh dalam langkah sebelumnya, muatkan semua pemalam yang dikonfigurasikan dan laksanakan kaedah jalankan objek untuk memulakan penyusunan.

• Tentukan entri: Cari semua fail entri berdasarkan entri dalam konfigurasi.

• Kompilasi modul: Bermula dari fail entri, panggil semua Pemuat yang dikonfigurasikan untuk menterjemah modul, kemudian ketahui modul yang bergantung pada modul, dan kemudian ulangi langkah ini sehingga semua fail yang bergantung kepada kemasukan Lulus langkah ini.

• Kompilasi modul lengkap: Selepas menggunakan Loader untuk menterjemah semua modul dalam langkah 4, kandungan terjemahan akhir setiap modul dan kebergantungan antara modul diperolehi.

• Sumber output: Berdasarkan kebergantungan antara entri dan modul, himpunkannya ke dalam ketulan yang mengandungi berbilang modul, dan kemudian tukar setiap ketul ke dalam fail berasingan dan tambahkannya ke Senarai keluaran , langkah ini ialah peluang terakhir untuk mengubah suai kandungan output.

• Output selesai: Selepas menentukan kandungan output, tentukan laluan output dan nama fail mengikut konfigurasi, dan tulis kandungan fail ke sistem fail.

Dalam proses di atas, Webpack akan menyiarkan acara tertentu pada masa tertentu Pemalam akan melaksanakan logik tertentu selepas mendengar peristiwa yang menarik, dan pemalam boleh call Webpack Menyediakan API untuk menukar keputusan pelaksanaan Webpack.

Perbezaan antara react dan webpack

React ialah rangka kerja JavaScript, pustaka JS untuk UI pemaparan dan digunakan untuk membina antara muka pengguna.

Webpack ialah pengikat yang boleh membungkus berbilang fail js ke dalam satu fail (sebenarnya, ia bukan sahaja boleh membungkus fail js, tetapi juga jenis fail lain, seperti fail css, fail json, dll.).

Peranan pek web

• Muat semula dan susun. Apa yang sebenarnya dilakukannya ialah menyusun sintaks yang tidak dikenali oleh penyemak imbas ke dalam sintaks yang dikenali oleh penyemak imbas. Sebagai contoh, kurang disusun menjadi css, sintaks ES6 ditukar kepada ES5, dsb.

• Kurangkan permintaan io. Biasanya selepas kami meminta, kami akan mengembalikan html ke pelayar. Pada masa ini, jika kami membuka konsol, kami akan menemui sumber statik yang dirujuk melalui skrip, pautan dan teg lain dalam halaman HTML, dan penyemak imbas akan membuat permintaan lain untuk mendapatkan sumber ini. Walau bagaimanapun, pembungkusan webpack menggabungkan semua sumber statik dan mengurangkan permintaan IO.

[Cadangan berkaitan: Tutorial video Redis]

Atas ialah kandungan terperinci Apakah perbezaan antara react dan webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!