Analisis terperinci fitur baru React 16+, bagian 1: informasi umum

Hari ini kami mempersembahkan bagi Anda bagian pertama dari terjemahan materi yang luar biasa ini . Ini dikhususkan untuk analisis rinci fitur Bereaksi baru yang telah muncul di perpustakaan ini sejak versi 16. Penulis materi ini telah terlibat dalam pemrograman selama 5 tahun. Di masa lalu, ia adalah seorang desainer dan mencoba sendiri sebagai ilustrator. Dia memasukkan komik dalam artikel itu, yang, menurut pendapatnya, akan membantu pembaca lebih memahami apa yang sedang dibahas.

Dalam aslinya, artikel ini berjudul "Reintroducing React: setiap React update sejak v16 didemistifikasi." Judul mengisyaratkan bahwa pembaca, mungkin sudah akrab dengan React, diundang untuk mengenal perpustakaan ini lagi. Pengenalan kembali ke React ini akan membantunya merampingkan apa yang sudah ia ketahui dan menemukan sesuatu yang baru.

Bagaimana cara membaca materi ini?

Sebelum membaca artikel ini, Anda dapat mengunduh e-book , yang didistribusikan secara gratis. Ini mewakili materi yang sama, dirancang sebagai file PDF, Epub atau Mobi mandiri. Buku ini memberikan contoh kode dengan penyorotan sintaksis. Mungkin akan lebih mudah bagi Anda untuk membaca materi dan mengerjakan kode secara paralel, berdasarkan buku. Selain itu, Anda disarankan untuk menggunakan repositori ini . Anda dapat menemukan kode contoh yang dibahas di sini.

Untuk siapa dan mengapa bahan ini ditulis?

Saya menulis aplikasi Bereaksi pertama saya sekitar 4 tahun yang lalu. Sejak itu, prinsip dasar React tidak berubah. Sebelum kita adalah kode deklaratif yang sama dan semua komponen yang sama. Semua ini baik, tetapi cara modern aplikasi Bereaksi ditulis berbeda dari sebelumnya. Selama bertahun-tahun, banyak hal baru telah muncul di Bereaksi, dan beberapa perpustakaan ini telah dihapus.

Jika Anda mempelajari Bereaksi untuk waktu yang lama, sangat mungkin bahwa Anda tidak terlalu berpengalaman dalam fitur-fitur baru perpustakaan ini. Selain itu, bahkan orang yang mengikuti inovasi mungkin sangat "tersesat" di dalamnya, sehingga untuk berbicara. Bagaimana cara memperbaiki situasi, menyadari bahwa yang lama perlu dibuang, dan mana yang baru yang harus diterima? Bagaimana Anda menyoroti fitur Bereaksi modern yang mungkin Anda temukan sangat berguna?

Bahkan saya, seorang programmer berpengalaman, terkadang tersesat, jika perlu, melupakan sesuatu yang lama dan belajar sesuatu yang baru. Ini mungkin terlihat sesulit mempelajari beberapa konsep yang sama sekali baru.

Jika Anda juga merasakan sesuatu seperti itu, maka saya berharap pekerjaan saya dapat membantu Anda meletakkan semuanya di tempatnya.

Hal yang sama dapat dikatakan tentang mereka yang baru mulai belajar Bereaksi.

Sekitar ada banyak informasi yang ketinggalan jaman. Jika Anda belajar Bereaksi dari beberapa publikasi yang cukup lama, maka Anda pasti bisa menguasai dasar-dasarnya. Namun, dalam pengembangan React modern, ada banyak fitur menarik baru yang patut Anda perhatikan. Yang terbaik adalah mempelajari tentang fitur-fitur ini sesegera mungkin, daripada mencoba melupakan metode kerja lama kemudian dan mempelajari yang baru.

Faktanya, di sini kita akan menganalisis secara terperinci semua yang baru yang muncul di Bereaksi 16+.

Apa yang baru di Bereaksi 16+?

Sekilas, mungkin terlihat bahwa dalam React, setelah rilis versi 16, tidak begitu banyak perubahan telah dibuat. Namun kenyataannya tidak demikian. Inilah yang akan kita bicarakan:

1. Metode siklus hidup komponen baru.
2. Manajemen negara yang disederhanakan menggunakan API Konteks.
3. Properti contextType dan fitur API Konteks.
4. Aplikasi profiler: diagram, analisis interaksi.
5. Pemuatan materi yang malas menggunakan React.lazy dan Suspense.
6. Versi fungsional komponen berbasis PureComponent dibuat menggunakan React.memo.
7. Sederhanakan Bereaksi aplikasi menggunakan kait.
8. Pola desain aplikasi React berbasis kait canggih.

Setiap item dalam daftar ini disajikan sebagai bagian besar yang terpisah. Bagian pertama berfokus pada teknik siklus hidup komponen baru.

Pembaca yang budiman! Kami sekarang berpikir apakah akan menerjemahkan kelanjutan dari materi ini . Jika topik React-development dekat dengan Anda, kami mengundang Anda untuk memberikan suara dan komentar.