Bagaimana untuk memberitahu jika React adalah yang terbaik untuk projek anda yang seterusnya

Pandangan cepat pada konsep teras React

• Apa itu bertindak balas? React adalah perpustakaan JavaScript yang popular dan berkuasa untuk membina antara muka pengguna interaktif yang cepat yang menggunakan pendekatan deklaratif, komponen untuk mengemas kini dan menjadikan komponen data selepas ia berubah.
• Peranan DOM Maya: Inti React adalah Maya DOM, yang merupakan model abstrak DOM yang ringan. React menggunakan DOM maya untuk mengemas kini laman web untuk mengelakkan operasi langsung DOM, dengan itu meningkatkan prestasi. DOM maya hanya mengemas kini bahagian yang diubah sebenar dengan membandingkan perbezaan sebelum dan selepas.
• Senario untuk React: React sesuai untuk projek -projek yang memerlukan tindak balas yang cepat terhadap peristiwa dan perubahan data yang kerap, terutama untuk UI interaktif yang kompleks yang perlu disegerakkan dengan model data yang mendasari. Ia juga membantu menguruskan komponen negeri dan menghalang kekacauan kod, jadi ia sesuai untuk projek -projek yang memerlukan banyak pengurusan negeri dan operasi DOM.

Pengguna moden mengharapkan aplikasi web mempunyai prestasi dan pengalaman yang lancar seperti aplikasi asli. Walaupun terdapat banyak teknik untuk mengurangkan masa pemuatan kali pertama untuk laman web, kelewatan masa antara operasi pengguna dan respons aplikasi sama-sama kritikal dalam aplikasi web interaktif. Aplikasi asli adalah responsif, dan begitu juga aplikasi web, walaupun dalam sambungan rangkaian yang lemah.

Banyak rangka kerja JavaScript moden menyelesaikan masalah ini dengan berkesan. React boleh dianggap sebagai salah satu perpustakaan JavaScript yang paling popular dan berkuasa untuk mewujudkan antara muka pengguna yang cepat dan interaktif untuk aplikasi web.

Artikel ini akan meneroka kelebihan dan mekanisme kerja React untuk membantu anda menentukan sama ada ia sesuai untuk projek anda yang seterusnya.

Apa itu bertindak balas?

React adalah perpustakaan JavaScript yang dicipta oleh Facebook untuk membina antara muka pengguna.

Ini adalah projek sumber terbuka dengan lebih daripada 74,000 bintang di GitHub.

Ciri -ciri React:

• Deklaratif: Reka bentuk pandangan mudah untuk setiap keadaan aplikasi, bertindak balas dengan cekap mengemas kini dan menjadikan komponen yang betul sebagai perubahan data.
• Komponen: Buat aplikasi React dengan memasang pelbagai komponen yang terkandung, masing -masing menguruskan keadaannya sendiri.
• Belajar sekali, tulis di mana -mana: React bukan rangka kerja yang lengkap, ia hanya perpustakaan untuk memberikan pandangan.

Bagaimana kerja DOM maya?

DOM maya adalah teras rendering cepat React of elemen antara muka pengguna dan perubahan mereka. Mari kita dapatkan pemahaman yang lebih mendalam tentang mekanisme.

Model Objek Dokumen HTML (DOM) ialah:

Antara muka pengaturcaraan untuk dokumen HTML dan XML ... DOM menyediakan perwakilan dokumen, sebagai kumpulan berstruktur nod dan objek, dengan sifat dan kaedah. Ia pada dasarnya menghubungkan laman web ke skrip atau bahasa pengaturcaraan. - -Mdn

Setiap kali anda ingin mengubah secara pemrograman mana -mana bahagian laman web, anda perlu mengubah suai DOM. Bergantung pada kerumitan dan saiz dokumen, ia mungkin mengambil masa yang lebih lama untuk melintasi DOM dan mengemas kini daripada pengguna yang boleh menerima, terutamanya apabila mempertimbangkan kerja yang perlu dilakukan oleh pelayar apabila DOM berubah. Malah, setiap kali DOM dikemas kini, penyemak imbas perlu mengira semula CSS dan melakukan susun atur dan redraw operasi di laman web.

React membolehkan pemaju menukar laman web tanpa perlu memproses DOM secara langsung. Ini dicapai melalui dom maya.

Maya DOM adalah model abstrak ringan DOM. React menggunakan kaedah render untuk membuat pokok nod dari komponen React dan mengemas kini pokok ini berdasarkan perubahan model data yang disebabkan oleh operasi.

Setiap kali data yang mendasari dalam perubahan aplikasi React, React mewujudkan perwakilan DOM maya baru untuk mewakili antara muka pengguna.

kemas kini perubahan ui dengan dom maya

React secara kasar mengikuti langkah -langkah berikut apabila mengemas kini dom penyemak imbas:

1. Setiap kali perubahan berlaku, bertindak balas semula untuk keseluruhan UI dalam perwakilan DOM maya.
2. React kemudian mengira perbezaan antara perwakilan DOM maya sebelumnya dan perwakilan baru.
3. Akhir sekali, React Patch DOM sebenar dengan apa yang sebenarnya berubah. Tanpa sebarang perubahan, React tidak akan mengendalikan HTML DOM sama sekali.

mungkin berfikir bahawa proses ini yang melibatkan menyimpan dua representasi DOM maya dalam ingatan dan membandingkannya mungkin lebih perlahan daripada memproses secara langsung DOM. Algoritma diff yang cekap, batch DOM membaca/menulis operasi, dan mengehadkan perubahan DOM kepada minimum yang diperlukan untuk menggunakan React dan DOM maya yang sangat baik untuk membina aplikasi berprestasi tinggi.

bertindak balas sesuai untuk semua projek?

Seperti namanya, React adalah baik untuk mewujudkan antara muka pengguna ultra-responsif-iaitu, antara muka pengguna yang bertindak balas dengan cepat kepada peristiwa dan perubahan data berikutnya. Komen Jurutera Facebook Jordan Walke mengenai nama React adalah inspirasi:

API ini bertindak balas terhadap sebarang perubahan negeri atau harta dan boleh memproses sebarang bentuk data (kedalaman struktur adalah seperti graf itu sendiri), jadi saya fikir nama itu sesuai. -Vjeux, "50,000 bintang teratas kami"

Walaupun sesetengah orang berfikir bahawa React diperlukan untuk semua projek, saya fikir ia adalah pilihan yang baik untuk aplikasi web yang perlu mengekalkan UI interaktif yang kompleks selaras dengan perubahan yang kerap kepada model data yang mendasari.

React direka untuk mengendalikan komponen negara dengan cara yang cekap (ini tidak bermakna pemaju tidak perlu mengoptimumkan kod mereka). Oleh itu, projek yang mendapat manfaat daripada ciri ini boleh dianggap sebagai calon yang ideal untuk React.

Chris Coyier menggariskan situasi saling berkaitan berikut di mana ia masuk akal untuk menggunakan React, dan saya cenderung bersetuju:

• Banyak pengurusan negeri dan operasi DOM. Iaitu, membolehkan dan melumpuhkan butang, mengaktifkan pautan, menukar nilai input, menutup dan mengembangkan menu, dan banyak lagi. Dalam projek -projek sedemikian, React menjadikan pengurusan komponen yang lebih cepat lebih cepat dan lebih mudah. Seperti yang dikatakan oleh pengarang Router React Michael Jackson dengan tepat berkata dalam tweet: & gt; Kuncinya ialah React bertanggungjawab untuk mengetahui apa perubahan kepada DOM sebenarnya perlu dibuat, bukan saya. Ini *sangat berharga *
• Elakkan kekeliruan kod. Mengesan keadaan kompleks dengan secara langsung mengubahsuai DOM boleh menyebabkan kekeliruan kod, sekurang -kurangnya tanpa memberi perhatian khusus kepada organisasi dan struktur kod.

Sumber

Jika anda ingin tahu bagaimana reaksi dan kerja dom maya, berikut adalah beberapa sumber yang boleh anda pelajari lebih lanjut:

• belajar bertindak balas dengan pusat reaksi bersepadu SitePoint.
• React Video dari Jurutera Facebook
• Chris Minnick's "The Real Manfaat Dom Maya di React.js"
• Bartosz Krajka "Perbezaan antara Dom dan Dom Maya"
• François Zaninotto's "React adalah lambat, React cepat: mengoptimumkan aplikasi reaksi dalam amalan"
• Chris Lienert's "Cara Memilih Rangka Kerja Front-End yang Kanan Untuk Syarikat Anda"

Kesimpulan

React dan lain-lain perpustakaan JavaScript yang serupa memudahkan perkembangan antara muka pengguna yang cepat dan didorong oleh peristiwa yang bertindak balas dengan cepat kepada perubahan negara. Matlamat yang berpotensi dapat dikenalpasti untuk merapatkan jurang antara aplikasi web dan aplikasi asli: Pengguna mengharapkan aplikasi web menjadi lancar dan lancar sebagai aplikasi asli.

Ini adalah arah pembangunan pembangunan web moden. Buat App React (projek yang mencipta aplikasi React tanpa konfigurasi) tidak sengaja memasukkan keupayaan untuk membuat aplikasi web progresif (PWAS) secara lalai. Aplikasi ini menggunakan pekerja perkhidmatan dan caching keutamaan luar talian untuk meminimumkan latensi dan membolehkan aplikasi web berfungsi di luar talian.

Soalan Lazim Mengenai React Virtual Dom

• Apakah dom maya dalam React? Maya DOM (VDOM) adalah konsep pengaturcaraan di mana perwakilan ideal atau "maya" UI disimpan dalam ingatan dan disegerakkan dengan "sebenar" DOM ​​oleh perpustakaan seperti ReactDOM. Proses ini dipanggil koordinasi. Dalam React, apabila anda memberikan elemen JSX, setiap objek DOM maya dikemas kini.

• Bagaimana kerja DOM maya? Maya DOM berfungsi dalam tiga langkah mudah. Pertama, apabila sebarang perubahan data yang mendasari, keseluruhan UI disampaikan semula dalam perwakilan DOM maya. Kemudian, perbezaan antara perwakilan DOM sebelumnya dan perwakilan baru dikira. Akhirnya, DOM sebenar hanya akan mengemas kini apa yang sebenarnya berubah. Ini lebih cekap daripada mengemas kini seluruh DOM dengan setiap perubahan dan meningkatkan prestasi.

• Bagaimanakah DOM maya React meningkatkan prestasi? DOM maya React meningkatkan prestasi dengan meminimumkan bilangan kali anda secara langsung mengendalikan DOM, dan operasi langsung DOM adalah operasi yang perlahan dalam mana -mana pelayar. Daripada mengemas kini seluruh DOM setiap kali perubahan berlaku, React mengemas kini hanya bahagian DOM yang perlu dikemas kini. Ini membawa kepada peningkatan prestasi yang signifikan.

• Apakah perbezaan antara dom sebenar dan dom maya? DOM sebenar adalah perwakilan sebenar laman web dalam penyemak imbas, manakala DOM maya adalah perwakilan maya laman web dalam ingatan. DOM maya lebih cepat dan lebih cekap kerana ia hanya mengemas kini bahagian DOM sebenar yang telah berubah, dan bukannya mengemas kini seluruh DOM setiap kali ia berubah.

• Apakah JSX dalam React? JSX bermaksud JavaScript XML. Ia adalah lanjutan sintaks untuk JavaScript, yang dibangunkan oleh Facebook, dan membolehkan kehadiran teks HTML/XML seperti JavaScript. Anda boleh menulis struktur HTML dalam fail yang sama yang mengandungi kod JavaScript.

• Bagaimana menggunakan JSX dalam React? React menggunakan JSX untuk menjadikan unsur -unsur pada DOM. JSX membolehkan kami menulis unsur -unsur HTML dalam JavaScript dan meletakkannya di DOM tanpa sebarang kaedah createelement () dan/atau appendChild (). JSX menukarkan tag HTML untuk bertindak balas dengan elemen dan membuat tulisan dan menambah HTML dalam reaksi lebih mudah.

• Apakah koordinasi dalam React? Penyelarasan adalah proses React mengemas kini DOM. Apabila keadaan berubah komponen, React perlu menentukan sama ada kemas kini DOM sebenar diperlukan. Ia melakukan ini dengan mencipta DOM maya baru dan membandingkannya dengan DOM maya lama. React mengemas kini DOM sebenar hanya di mana terdapat perbezaan.

• Bagaimana reaksi mengendalikan peristiwa? React mencipta sistem acara sendiri, yang serasi sepenuhnya dengan model objek W3C. React melaksanakan sistem peristiwa sintetik yang membawa konsistensi dan prestasi tinggi untuk bertindak balas terhadap aplikasi dan antara muka. Ia melakukan ini dengan mewakilkan peristiwa ke unsur -unsur akar dokumen dan kemudian memetakannya kembali ke elemen komponen yang sepadan.

• Apakah peranan komponen dalam React? Komponen adalah blok bangunan mana -mana aplikasi React, dan satu aplikasi biasanya terdiri daripada pelbagai komponen. Komponen pada dasarnya adalah sebahagian daripada antara muka pengguna. Ia memisahkan UI ke dalam bahagian yang berasingan dan boleh diguna semula yang boleh diproses secara berasingan.

• Bagaimana Borang Mengendalikan React? Dalam HTML, elemen bentuk (seperti , , dan ) biasanya mengekalkan status mereka sendiri dan mengemas kini berdasarkan input pengguna. Dalam React, keadaan yang boleh berubah biasanya disimpan di dalam harta negara komponen dan dikemas kini hanya dengan setState (). Pemprosesan bentuk React sedikit berbeza, tetapi membolehkan lebih banyak kawalan berbutir ke atas bentuk dan datanya.

Atas ialah kandungan terperinci Bagaimana untuk memberitahu jika React adalah yang terbaik untuk projek anda yang seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!