React Hooks dan Faedah

Bertindak balas

Sebagai perpustakaan JavaScript bahagian hadapan untuk membina antara muka berdasarkan komponen, React telah mendapat populariti dalam kalangan pembangun bahagian hadapan. Ia telah dilancarkan oleh Facebook pada 2013 dan kini diselenggara oleh Meta. React ialah sumber terbuka dan kes penggunaan utamanya ialah pembangunan aplikasi web satu halaman dengan tumpuan pada antara muka pengguna dan pemaparan komponen kepada DOM.

Aplikasi React bergantung pada perpustakaan untuk penghalaan dan fungsi sisi klien yang lain. Kelebihan utama React ialah ia hanya memaparkan semula bahagian halaman yang telah berubah sekali gus mengelakkan pemaparan semula elemen DOM yang tidak berubah yang tidak perlu.

Ciri-ciri Utama

Deklaratif
Mengikuti paradigma pengaturcaraan deklaratif, dalam React pembangun reka bentuk pandangan untuk setiap keadaan aplikasi, yang kemudiannya dikemas kini dan komponen diberikan sebagai perubahan data. Berbanding dengan pengaturcaraan imperatif, tumpuan adalah pada "apa" yang perlu dilakukan dan bagaimana halaman akhir sepatutnya kelihatan, berbanding dengan "bagaimana" ia dilakukan langkah demi langkah.

Komponen
Kod dalam React terdiri daripada komponen, yang merupakan entiti modular dan boleh diguna semula. Aplikasi biasanya mempunyai berbilang lapisan komponen dan ia diberikan kepada unsur akar yang dipanggil dalam DOM. Semasa pemaparan nilai komponen dihantar antara komponen melalui sifat a.k.a. prop. Nilai dalaman komponen dirujuk sebagai keadaan.

Cangkuk Bertindak Balas
Tersedia sejak React 16.8 (2019), React Hooks ialah fungsi yang membolehkan pembangun menyambung ke dalam keadaan React dan ciri kitaran hayat daripada komponen fungsi. Yang penting, Hooks membenarkan pembangun menggunakan ciri React tanpa perlu menggunakan kelas. Ini dianggap sebagai faedah yang besar, kerana pengaturcara perlu kurang bergantung pada komponen kelas.

Komponen Kelas
Kelas berkelakuan serupa sebagai komponen berfungsi. Walau bagaimanapun, daripada menggunakan Hooks untuk mengurus keadaan dan peristiwa kitaran hayat, mereka menggunakan kaedah kitaran hayat pada kelas asas React.Component.

Penghalaan
Memandangkan React tidak mempunyai sebarang sokongan terbina dalam untuk penghalaan, perpustakaan pihak ketiga boleh digunakan untuk menangani penghalaan. Ini membolehkan pembangun mentakrifkan laluan dengan mudah, mengurus navigasi dan mengendalikan perubahan URL.

DOM maya
Model Objek Dokumen Maya (DOM) ialah ciri penting, kerana React menggunakan struktur data dalaman, mengira perbezaan yang terhasil dan mengemas kini DOM yang dipaparkan dengan cekap. Ini membolehkan pembangun menulis kod seolah-olah keseluruhan halaman dipaparkan pada setiap perubahan manakala React hanya memaparkan komponen yang benar-benar berubah. Ini menyediakan peningkatan prestasi.

React Hooks

Seperti yang dinyatakan sebelum ini, Hooks ialah tambahan baharu dalam React 16.8. Mereka membenarkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas.

Rujukan:
React Docs

useState
useState ialah React Hook yang membolehkan anda menambah pembolehubah keadaan pada komponen anda.

Rujukan:
useState

Contoh

import { useState } daripada 'react';
fungsi MyComponent() {
const [umur, setAge] = useState(28);
const [nama, setName] = useState('Taylor’);
const [todos, setTodos] = useState(() => createTodos());
// …

Konvensyen ini adalah untuk menamakan pembolehubah keadaan seperti [sesuatu, setSomething] menggunakan pemusnahan tatasusunan.

Parameter termasuk initialState, iaitu nilai yang anda mahukan keadaan pada mulanya. Ia boleh menjadi nilai apa-apa jenis, tetapi terdapat tingkah laku khas untuk fungsi. Argumen ini diabaikan selepas pemaparan awal.

useState mengembalikan tatasusunan dengan tepat dua nilai:

1. Keadaan semasa. Semasa pemaparan pertama, ia akan sepadan dengan Keadaan awal yang telah anda lalui.
2. Fungsi set yang membolehkan anda mengemas kini keadaan kepada nilai yang berbeza dan mencetuskan pemaparan semula.

useEffect
useEffect ialah React Hook yang membolehkan anda menyegerakkan komponen dengan sistem luaran.

Contoh
useEffect(setup, dependencies)

Ia dipanggil di peringkat atas komponen anda untuk mengisytiharkan Kesan.

persediaan ialah fungsi dengan logik Kesan. Fungsi persediaan juga boleh mengembalikan fungsi pembersihan secara pilihan. Apabila komponen anda ditambahkan pada DOM, React akan menjalankan fungsi persediaan anda. Selepas setiap pemaparan semula dengan kebergantungan yang diubah, React akan menjalankan fungsi pembersihan dengan nilai lama dahulu, dan kemudian menjalankan fungsi persediaan anda dengan nilai baharu.

Pergantungan adalah pilihan dan ini ialah senarai semua nilai reaktif yang dirujuk di dalam kod persediaan. Nilai reaktif termasuk prop, keadaan dan semua pembolehubah serta fungsi yang diisytiharkan terus di dalam badan komponen anda.

Pengambilan Utama

Satu faedah utama React ialah ia menggunakan JavaScript, yang merupakan salah satu bahasa pengaturcaraan paling popular di dunia. React mudah digunakan, umumnya mudah dipelajari dan meningkatkan prestasi dan kesalingoperasian aplikasi web anda.

Atas ialah kandungan terperinci React Hooks dan Faedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!