Apa yang baru di pustaka React JavaScript UI

Sekarang tersedia dalam rilis produksi, Versi 16.8 dari library React JavaScript UI memiliki kemampuan hooks, untuk menggunakan state dan fitur React lainnya tanpa harus menulis sebuah kelas.

Tempat mengunduh React

Anda dapat mengunduh versi produk pada React dari GitHub.

Versi sekarang: Fitur-fitur baru di React 16.8

Dirilis pada Februari 2019, React 168 menyediakan implementasi hooks untuk DOM React, server DOM, perender uji, dan perender dangkal. Hooks didukung di React DevTools. Pengembang dapat membuat kait mereka sendiri untuk berbagi logika stateful yang dapat digunakan kembali di antara komponen. Namun Facebook menyarankan pengembang untuk meluangkan waktu mereka dengan kemampuan ini, tidak menyarankan pengembang menulis ulang aplikasi untuk menggunakan pengait "dalam semalam."

Tidak ada rencana untuk menghapus class dari React, jadi developer harus mencoba hook di beberapa komponen baru. Kode menggunakan pengait pemindahan akan bekerja bersama kode yang ada menggunakan kelas.

Versi sebelumnya: Fitur baru di React 16.7

Dirilis pada Desember 2018, React 16.7 menambahkan kemampuan hooks, untuk menggunakan state dan fitur React lainnya tanpa menulis kelas.

Hooks adalah fungsi yang ditautkan ke status React dan fitur siklus hidup dari komponen fungsi. Mereka saat ini bekerja berdampingan dengan kode yang ada, memungkinkan adopsi bertahap. Tidak ada rencana untuk benar-benar menghapus kelas dari React. Hooks memecahkan berbagai masalah di React termasuk:

  • Kurangnya cara untuk melampirkan perilaku yang dapat digunakan kembali ke sebuah komponen. Ada pola seperti alat peraga render dan komponen tingkat tinggi yang mencoba menyelesaikannya, tetapi ini memerlukan restrukturisasi komponen, yang bisa merepotkan dan mempersulit untuk mengikuti kode. Dengan menggunakan hook, developer dapat mengekstrak logika stateful dari sebuah komponen untuk pengujian independen dan digunakan kembali.
  • Komponen kompleks menjadi terlalu sulit untuk dipahami. Dengan kait, komponen dapat dipecah menjadi fungsi yang lebih kecil berdasarkan bagian terkait, seperti menyiapkan langganan atau mengambil data. Ini dilakukan alih-alih memaksakan pemisahan berdasarkan metode siklus hidup.
  • Kelas dapat membingungkan orang dan mesin dan dipandang sebagai penghalang terbesar untuk mempelajari React. Hooks memungkinkan pengembang menggunakan lebih banyak fitur React tanpa kelas. Hooks memiliki fungsi, tetapi tanpa mengorbankan semangat React. Akses disediakan untuk pintu keluar darurat. Pengembang tidak harus mempelajari teknik pemrograman fungsional atau reaktif yang kompleks.

Versi sebelumnya: Fitur-fitur baru di React 16.6

Dirilis pada Oktober 2018, React 16.6 memberikan beberapa peningkatan.

  • Dengan memo, pengembang dapat menyelamatkan diri dari rendering dengan komponen fungsi, mirip dengan bagaimana komponen kelas dapat menyelamatkan dari rendering ketika props input sama menggunakan PureComponentsatau shouldComponentUpdate.
  • Dengan lazy, pengembang dapat menggunakan Suspensekomponen untuk pemisahan kode dengan menggabungkan impor dinamis dalam panggilan ke React.lazy(). Catatan: Fitur ini belum tersedia untuk rendering sisi server.
  • Kenyamanan API diperkenalkan untuk menggunakan nilai konteks dari dalam komponen kelas. Pengembang mengeluh bahwa mengadopsi API prop render baru dari React 16.3 bisa menjadi sulit dalam komponen kelas.
  • Metode error getDerivedStatefromError(),, merender UI fallback sebelum render selesai. Catatan: Ini belum tersedia untuk rendering sisi server, tetapi pengembang dapat mulai mempersiapkannya.
  • Dua StrictmodeAPI sudah tidak digunakan lagi: findDOMNode()dan konteks lama menggunakan contextType dan getChildContext. Pengembang didorong untuk meningkatkan ke contextTypeAPI baru .

Versi sebelumnya: Fitur baru di React 16.4

Versi 16.4 dari React, dirilis pada akhir Mei 2018, menambahkan dukungan untuk acara pointer, fitur yang sering diminta, serta peningkatan kemampuan rendering asinkron yang akan datang. Peramban yang mendukung peristiwa penunjuk termasuk versi Google Chrome, Mozilla Firefox, Microsoft Edge, dan Microsoft Internet Explorer.

Peristiwa penunjuk adalah peristiwa DOM yang diaktifkan untuk perangkat penunjuk, dirancang untuk menyediakan model peristiwa tunggal untuk menangani perangkat seperti mouse atau sentuhan.

Dengan dukungan untuk event pointer, React menambahkan dukungan untuk tipe event yang meliputi:

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Kemampuan baru lainnya di React 16.4 meliputi:

  • Kompatibilitas yang ditingkatkan dengan mode perenderan asinkron yang direncanakan. Untuk melakukan ini, rilis menampilkan perbaikan bug getDerivedStatefromProps, yang sekarang dipanggil setiap kali komponen diperlukan terlepas dari mengapa pembaruan terjadi. Itu hanya dipanggil jika sebuah komponen dirender oleh induk dan tidak akan diaktifkan sebagai hasil dari lokal setState. Perbaikan tidak memengaruhi sebagian besar aplikasi, tetapi dalam kasus yang jarang terjadi, dapat menyebabkan masalah dengan sejumlah kecil komponen.
  • Komponen profiler eksperimental telah ditambahkan, disebut unstable_Profiler, untuk mengukur kinerja.
  • Rekonsiliator eksperimental, untuk membuat perender khusus, menampilkan bentuk konfigurasi host baru yang datar dan tidak menggunakan objek bertingkat.
  • Perbaikan pada React DOM termasuk memperbaiki bug yang mencegah penyebaran konteks dalam beberapa kasus, serta situasi di mana beberapa atribut salah dihapus dari node elemen kustom.

Kemampuan kembali panggilan eksperimental telah dihapus di React Version 16.4 karena itu mempengaruhi ukuran paket dan API tidak cukup baik. Harapkan kembali di beberapa titik dalam bentuk lain, kata Facebook.

Versi sebelumnya: Fitur-fitur baru di React 16.3

Rilis React versi 16.3 Maret 2018 menghadirkan perubahan siklus hidup serta API untuk konteks.

Perubahan siklus hidup di React 16.3

Untuk siklus hidup komponen, mode rendering asinkron yang akan datang meregangkan model API komponen kelas, yang digunakan dengan cara yang awalnya tidak dimaksudkan. Jadi, siklus hidup baru sedang ditambahkan, termasuk getDerivedStateFromProps, sebagai alternatif yang lebih aman dari siklus hidup lama componentWillReceiveProps,. Juga ditambahkan getSnapshotBeforeUpdate, untuk mendukung pembacaan aman properti, seperti DOM sebelum pembaruan dilakukan.

React 16.3 juga menambahkan awalan "tidak aman" ke beberapa siklus hidup ini, seperti to componentWillMountdan componentWillReceiveUpdate. Dalam contoh ini, "tidak aman" tidak mengacu pada keamanan tetapi pada fakta bahwa kode yang menggunakan siklus hidup ini lebih cenderung memiliki bug di versi React yang akan datang.

Dengan rilis React 16.3, pengembang tidak perlu melakukan apa pun tentang metode lama. Rilis ini dimaksudkan untuk meminta pengelola proyek sumber terbuka memperbarui pustaka mereka sebelum peringatan penghentian, yang tidak akan diaktifkan hingga rilis mendatang pada baris 16.x.

Versi 16.3 menambahkan StrictModekomponen, yang mengidentifikasi komponen dengan siklus hidup yang tidak aman. StrictMode, yang hanya berjalan dalam mode pengembangan, juga memperingatkan tentang penggunaan API ref string lama dan mendeteksi efek samping yang tidak terduga. Ini mengaktifkan pemeriksaan tambahan untuk keturunan. Lebih banyak fungsi akan ditambahkan nanti.

API Konteks mendukung pemeriksaan jenis statis dan pembaruan mendalam

API konteks baru, mendukung pemeriksaan tipe statis dan pembaruan mendalam. API ini juga lebih efisien daripada versi API eksperimental sebelumnya, kata Brian Vaughn, anggota tim inti React JS di Facebook. Konteks memungkinkan data diteruskan melalui pohon komponen tanpa perlu meneruskan props secara manual, beberapa di antaranya menyertakan preferensi lokal dan tema UI. API lama akan terus berfungsi untuk rilis React 16.x, memberi pengguna waktu untuk bermigrasi.

Juga baru di React 16.3:

  • API yang ditingkatkan, disebut createrefAPI, untuk mengelola ref, yang menyediakan cara untuk mengakses node DOM atau elemen React yang dikembangkan dalam metode render.
  • The forwardRefAPI, membantu dengan penggunaan komponen tingkat tinggi yang mempromosikan penggunaan kembali kode.

Versi sebelumnya: Fitur baru di React 16.2

Rilis React 16.2 November 2017 menghadirkan kemampuan fragmen untuk meningkatkan dukungan untuk menampilkan banyak turunan dari metode render komponen. Fragmen, yang menyerupai tag JSX kosong, memungkinkan pengembang mengelompokkan daftar turunan tanpa menambahkan node ke DOM.

Anda dapat menginstal Versi 16.2 dari registri NPM. Untuk menginstal dengan pengelola paket Yarn, jalankan yarn add [email protected]^16.2.0 [email protected]^16.2.0. Untuk menginstalnya dengan NPM, jalankan npm install --save [email protected]^16.2.0 [email protected]^16.2.0.

Versi sebelumnya: Fitur baru di React 16.0

Dijuluki "React Fiber" selama pengembangannya, React 16.0 September 2017 adalah penulisan ulang inti React, meningkatkan respons yang dirasakan untuk aplikasi kompleks melalui algoritme rekonsiliasi baru. Fitur utama React 16 meliputi:

  • Error yang menampilkan pelacakan tumpukan komponen untuk membuatnya lebih mudah di-debug.
  • Mengembalikan string / array langsung dari metode render komponen.
  • Perender sisi server baru yang lebih cepat streaming.
  • Performa aplikasi yang lebih asli.
  • Pergeseran dari lisensi BSD + Patents yang kontroversial ke lisensi MIT yang lebih sesuai.

Meskipun internal React telah sepenuhnya ditulis ulang di React 16, API publik "pada dasarnya tidak berubah," kata Sophie Alpert, manajer teknik Facebook untuk React. Tujuannya adalah untuk menyelamatkan pengembang dari keharusan menulis ulang komponen yang sudah ada yang dibangun dengan React.

Kode baru React 16 ditulis di samping kode lama di repo GitHub, sesuai praktik yang biasa dilakukan di Facebook. Perpindahan antara keduanya dilakukan dengan useFiberfitur flag Boolean . Prosesnya memungkinkan Facebook mulai membangun implementasi barunya tanpa memengaruhi pengguna yang ada dan terus melakukan perbaikan bug pada basis kode lama.

Setelah beberapa bulan mengatasi bug, Facebook memilih untuk mengirimkan satu produk untuk mengurangi kemungkinan kumpulan bug, daripada menyimpan dua versi React saat ini.