Apakah React dan Bagaimana ia berfungsi?

React ialah Pustaka Javascript untuk membina antara muka pengguna. Kini dua perkara penting, satu ialah Perpustakaan Javascript, satu lagi ialah antara muka pengguna. Perpustakaan ialah beberapa koleksi kod, yang boleh kami gunakan semula untuk membuat aplikasi kami. Dengan menggunakan React dan beberapa koleksi kod, kami boleh membuat aplikasi web, mudah alih, aplikasi desktop dan antara muka pengguna kami.

Setiap kali kita bercakap tentang aplikasi, ia pada asasnya mempunyai dua bahagian. Satu ialah bahagian hadapan (iaitu antara muka pengguna), satu lagi bahagian belakang, di mana semua logik berada.
Bahagian hadapan ialah bahagian di mana pengguna berinteraksi, seperti menyemak imbas, mengklik butang, menghantar borang, dsb. Kemudian bahagian hadapan kami membalasnya dengan bahagian belakang.
Dan bahagian belakang mengandungi banyak logik dan data yang kompleks, seperti pengesahan, kebenaran, manipulasi data, dll.
Tetapi React tidak mengambil berat sama sekali dengan bahagian belakang. React hanya berfungsi dengan antara muka pengguna.

Sekarang jika kita bercakap tentang web, kita tahu bahawa Javascript ialah bahasa pengaturcaraan lalai penyemak imbas. Tetapi React bukan bahasa pengaturcaraan, ia hanya pustaka Javascript.
Ini bermakna, semua yang kami lakukan dalam React akhirnya tidak lebih daripada Javascript vanila tulen.

Baiklah, biar saya tanya satu soalan. React datang pada tahun 2013 bro, jadi bukankah kita membuat antara muka pengguna sebelum itu?
Ya, kami telah melakukan ini sebelum ini dengan Javascript dan jQuery tulen.
Sekarang persoalannya, mengapa React datang lagi? Apakah masalah dengan Javascript?
Untuk memahami masalah yang sebenarnya datang untuk diselesaikan oleh React, kita perlu menggali lebih mendalam. Mari kita menyelam dalam-dalam...!

Kita akan lihat dengan aplikasi kecil. Kami akan membuat aplikasi kaunter kecil, seperti yang anda lihat di bawah, kod HTML ringkas dengan dua id bernama counterNumber dan butang.

Sekarang lihat pada imej kod JavaScript, terdapat kod mudah. Saya tidak bercadang untuk menerangkan kod ini kepada anda. Perhatikan apa yang saya maksudkan.

counterNumber dan butang dipilih sebagai Elemen DOM, kemudian nilai kiraan ditambah 1 dengan addEventListener. Kemudian nilai counterNumberEl dikemas kini di sana. Apa sebenarnya yang berlaku di sini? Jika anda melihat dengan teliti, anda akan faham bahawa pada asasnya terdapat dua fungsi:

1. Merebut Elemen dan bekerja dengannya ialah perkara yang kami mahu lakukan.
2. Mengemas kini UI (Antara Muka Pengguna)

Jadi, apa masalahnya di sini? Kod berfungsi! Walau bagaimanapun, katakan anda memerlukan dua aplikasi kaunter. Apa yang perlu dilakukan kemudian?

Anda perlu kembali ke HTML itu dan ambil div baharu, ambil secara berasingan dengan id baharu. Kemudian UI perlu dikemas kini kemudian.

Kini, saya hanya bercakap tentang dua aplikasi kaunter, tetapi apabila terdapat terlalu banyak interaksi dan UI yang kompleks, pembangun akan terharu. Ini adalah masalah utama! Anda sedang mencipta kefungsian di satu pihak, dan sebaliknya mengemas kini UI, yang menjadi sangat menyakitkan.

Apabila syarikat seperti Facebook menghadapi masalah besar ini, Jordan Walke, seorang jurutera perisian Facebook, mencipta React.js pada tahun 2011, diilhamkan oleh Rangka Kerja Berasaskan Komponen PHP XHP-js. Ia pertama kali dilaksanakan dalam suapan berita Facebook pada tahun 2011, dan pada tahun 2012 ia digunakan dalam Instagram. Sumber terbuka React.js pada tahun 2013.

Kini kami tahu sebab kami menggunakan React. Jadi mari kita lakukan aplikasi kaunter yang kita lakukan dengan vanilla JS kini menggunakan React. Kemudian keyakinan anda akan meningkat bahawa betapa mudahnya kehidupan pembangun selepas React. Mari pergi ke kod…

Pertama sekali, saya akan menunjukkan kepada anda cara memasang React untuk kemudahan anda, tetapi tiada siapa yang menggunakan React dengan cara ini dalam projek kami. Saya hanya menunjukkannya seperti ini untuk kemudahan pemahaman supaya anda boleh memahaminya dari peringkat teras.

Di sini saya baru sahaja menyambungkan React dengan pautan ini seperti yang mereka katakan dari tapak react.org. Sekarang jika saya pergi ke fail react.js dan menulis console.log(React) dan console.log(ReactDOM), maka kita boleh melihat 2 objek dalam konsol, itu bermakna React kita disambungkan. Perhatikan, tiada apa-apa selain div kosong di dalam teg badan, hanya id yang dipanggil root.

Dalam JavaScript, kami boleh mencipta elemen dalam DOM dengan cara yang sama seperti kami mula-mula bekerja dengan pemilih. Begitu juga kita boleh mencipta elemen dalam React juga. Di sini div dicipta, di dalamnya dicetak Hello World dengan tag p. Walaupun ini tidak kelihatan seperti masalah pada masa ini, apabila anda mencipta terlalu banyak elemen, kehidupan akan berakhir! Melakukan perkara yang sama berulang kali adalah masalah. Itulah sebabnya React mencipta penanda sendiri, dipanggil JSX (JavaScript XML). Walaupun ia kelihatan seperti HTML, ia sebenarnya JSX.

Beginilah ia ditulis dalam imej di atas. Tetapi masalahnya, pelayar tidak akan memahami JSX ini. Jadi untuk menyelesaikan masalah ini datang transpiler kami Babel, yang akan mentranspiler JSX kami menjadi JS vanila, yang akan difahami oleh penyemak imbas.

Untuk menyambungkan Babel lawati tapak web kami > Persediaan > Salin pautan ini di bawah teg badan fail HTML dan js saya yang saya buat =”teks/babel” di sana.

Sekarang kerana ia adalah JSX, kami boleh menulis apa sahaja JavaScript yang kami mahukan di sini. Jadi mari kita permudahkan sintaks ini. Mula-mula mari kita masukkan ke dalam fungsi JS.

Perhatikan di sini, myElement tare saya baru sahaja memasukkan fungsi yang dipanggil Increment dan menjadikan fungsi Increment seperti ini memudahkan untuk menulis dalam React. Sekarang kita boleh menulis JS di sini, jika kita telah bekerja dengan kod JS sebelumnya di sini, ia akan berfungsi. Tetapi React mengatakan bahawa jika anda ingin mengurus keadaan seperti yang saya lakukan, anda tidak perlu memikirkan kemas kini UI. Jadi dalam React mereka menyediakan fungsi yang dipanggil useState, saya menunjukkan cara menggunakannya.

UseState ini akan berfungsi sebagai keadaan butang kenaikan kami. UseState lalai kepada nilai, yang akan menunjukkan lalai dalam keadaan kita, dalam kes ini kita perlu memberikan 0. Fungsi useState pada asasnya mengembalikan tatasusunan kepada kami, yang mengandungi 2 perkara — satu ialah nilai yang kami berikan dan satu lagi ialah fungsi yang mengemas kini nilai keadaan. Jadi sekarang kita telah memisahkan tatasusunan dengan memusnahkannya.

Sekarang jika kita mahu pembilang sebagai nilai awal kita, kini selepas pemulangan kita boleh memberikan {counter} seperti ini dan bukannya 0. Ini dipanggil interpolasi. Kini nilai kaunter akan berubah secara dinamik. Dan dalam butang onClick (memandangkan ia adalah JSX, jadi ia harus ditulis mengikut kotak unta seperti onClick) harus dipanggil fungsi.

Jika saya memberikannya seperti ini, maka ia telah selesai, tetapi ada masalah di sini. Jika saya memanggil fungsi setCounter seperti ini, ia akan dipanggil, yang kita tidak mahu. Kami mahu nilai butang itu meningkat apabila seseorang mengklik padanya. Jadi kita perlu membuat fungsi anak panah tanpa nama, maka masalah itu akan diselesaikan.

Sekarang jika anda perasan bahawa di sini kami tidak mengemas kini UI secara manual dengan mengambil sebarang elemen DOM, di sini kami hanya memberitahu React apa yang kami mahu, yang lain React mengemas kini UI itu sendiri.

Kini apabila kami memberikan contoh JS, masalah utama yang kami hadapi dengan JS ialah — perlu mengemas kini UI secara manual. Jika kami mahu menggunakan aplikasi itu sekali lagi, kami perlu melakukan perkara yang sama berulang kali.

Tetapi React menyelesaikan kedua-dua masalah ini. Kami telah melihat cara React berfungsi tanpa mengemas kini UI secara manual, kini kami akan melihat cara React membantu kami jika kami perlu menggunakan aplikasi ini di 2-3 tempat.

Tengok sini, saya cuma <> Dalam hal ini, saya memanggil fungsi kenaikan 2 kali, kerja selesai. Sekarang perkara yang paling menarik ialah anda boleh menjalankan 2 aplikasi secara berasingan, yang bermaksud mereka akan menguruskan keadaan secara berasingan. Maksud saya anda faham, anda boleh menggunakannya di mana-mana di seluruh laman web jika anda mahu, tetapi sekali lagi tempat yang berbeza akan berbeza, bermakna satu tidak berkaitan dengan yang lain. Inilah kuasa Reactjs.

Pada asasnya, anda memberitahu React tentang fungsi anda dan React akan mengemas kini UI secara automatik dengan sewajarnya. Inilah keindahan ReactJS

Jadi apa yang kita bincangkan tentang React? Mengapa kita menggunakan React? Sekarang saya faham sepenuhnya masalah yang datang untuk diselesaikan oleh React. Tiada lagi soalan sebegitu boleh menahan anda di papan temu duga. Bukan mudah untuk membaca sepenuhnya dengan kesabaran sebegitu, kak. Anda telah melakukannya, semoga berjaya.

Selamat Pengekodan!

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