Penulis catatan, yang kami terbitkan terjemahan hari ini, mengatakan bahwa ada kesenjangan antara menggunakan React untuk mengembangkan antarmuka pengguna dan kebutuhan untuk mengetahui bagaimana React sebenarnya bekerja. Banyak orang yang menggunakan Bereaksi dalam praktik tidak tahu apa yang terjadi di dalam perut perpustakaan ini. Di sini, dalam bentuk animasi, kami akan mempertimbangkan beberapa proses utama yang terjadi dalam Bereaksi selama pembentukan antarmuka pengguna.
Meluncurkan Aplikasi Bereaksi
Perlu dicatat bahwa untuk membuat aplikasi Bereaksi, Anda mungkin mungkin tidak tahu tentang mekanisme internal Bereaksi. Tetapi saya memutuskan untuk menyiapkan materi ini untuk semua orang yang, dengan alasan apa pun, ingin lebih memahami pekerjaan Bereaksi. Proses yang dijelaskan disajikan dalam bentuk animasi. Saya harap ini membantu memperjelas analisis mereka.
Bereaksi, ketika Anda pertama kali memulai aplikasi, secara otomatis me-mount kelas
App ke wadah root aplikasi.
Mount Pertama <Aplikasi />Virtual DOM dan algoritma perbandingan
Selama pekerjaan subsistem Bereaksi yang mengimplementasikan Algoritma Diffing, pencarian dilakukan untuk perbedaan antara dua DOM virtual (Model Objek Dokumen Virtual, model dokumen virtual). Perlambat untuk sementara waktu. Dua DOM virtual? Tampaknya hanya ada satu DOM virtual di Bereaksi ... Mari kita cari tahu. Bereaksi membandingkan DOM virtual sebelumnya dengan yang baru. Memperbarui DOM berbasis browser dilakukan hanya jika, ketika membandingkan DOM virtual, perbedaan di antara mereka terungkap.
Animasi abstrak dari algoritma perbandingan Bereaksi. Jika ditemukan bahwa dua pohon DOM virtual berbeda, DOM nyata di browser dicocokkan dengan pohon DOM virtual terbaruPertimbangkan apa yang terjadi pada animasi di atas.
- Pada acara
click , panggilan API.tweet() dengan data permintaan POST yang berisi message . - Menanggapi permintaan,
payload dikembalikan, data ini dikirim ke callback (event) => { … } . - Jika data yang dikembalikan ke
payload harus menyebabkan perubahan props , perbandingan pohon DOM virtual dilakukan. - Jika pohon berubah menjadi berbeda, pohon terbaru dikirim ke browser.
- Kemudian DOM virtual baru menjadi lama, dan kami mengharapkan acara baru.
Bereaksi Komponen
Komponen Bereaksi hanyalah objek JavaScript. React menciptakan DOM virtualnya sendiri, yang merupakan tampilan hierarki dari seluruh struktur antarmuka pengguna. Bereaksi menyimpan pohon DOM virtual dalam memori. Sebelum apa yang ada di DOM virtual ditampilkan secara fisik di jendela browser, React dapat melakukan banyak operasi untuk menambah, memperbarui, dan menghapus item dari DOM virtual.
Jangan gunakan metode komponen
render() untuk apa pun yang tidak terkait dengan rendering elemen antarmuka pengguna. Jika Anda perlu mengubah status atau properti komponen, gunakan metode standar siklus hidup komponen Bereaksi.
Metode render () harus selalu tetap menjadi fungsi murni.
Metode
render() memperbarui DOM komponen virtual. Jika pohon DOM virtual baru berbeda dari pohon yang ditampilkan sebelumnya, maka Bereaksi, selain memperbarui DOM virtual, juga akan memperbarui DOM browser nyata. Pengembang tidak harus secara langsung memperbarui DOM browser secara langsung. Aturan ini berlaku untuk setiap tempat dalam kode aplikasi Bereaksi. Ini sangat penting ketika diterapkan pada fungsi
render() .
Jangan mencemari metode render () dengan pemanggilan fungsi yang entah bagaimana memperbarui DOM secara langsungDalam metode
render() , Anda tidak boleh mengubah status komponen (bahkan menggunakan
setState ), dan melakukan permintaan HTTP. Jangan mengakses jQuery dari metode ini, jangan mengeksekusi permintaan untuk memuat data tertentu. Faktanya adalah bahwa metode
render() perlu dipertahankan dalam keadaan di mana ia akan menjadi fungsi murni. Metode ini selalu disebut pada tahap akhir dari mekanisme komponen. Dalam pelaksanaannya, Anda hanya perlu memperbarui antarmuka pengguna. Diasumsikan bahwa semua pembaruan untuk DOM virtual telah selesai.
Acara Siklus Hidup Komponen
Ketika komponen pertama kali dipasang di DOM, Bereaksi meningkatkan
componentWillMount siklus hidup
componentWillMount . Setelah komponen virtual ditampilkan untuk pertama kalinya (yaitu, ia dipasang untuk pertama kali di DOM nyata peramban), acara lain disebut -
componentDidMount .
Diharapkan bahwa sebagian besar komponen logika yang dipanggil selama semua tahap aplikasi akan dijelaskan secara tepat dalam metode siklus hidup mereka.
Ringkasan
Banyak pengembang Bereaksi saat ini menggunakan komponen fungsional dan pengait alih-alih komponen berdasarkan kelas dan metode siklus hidupnya. Metode siklus hidup bahkan dianggap tidak aman. Jika Anda yakin dokumentasi Bereaksi, maka mungkin metode ini akan usang di masa depan. Itulah sebabnya penulis menganggap artikel ini sebagai deskripsi teknologi, beberapa di antaranya mungkin segera terlupakan. Namun dia, meskipun demikian, berharap bahwa materi ini akan bermanfaat bagi mereka yang baru mulai berkenalan dengan React, dan mereka yang tertarik dengan sejarah pengembangan teknologi pengembangan web.
Pembaca yang budiman! Apakah Anda menggunakan React hooks?