Apakah Hooks dan kegunaannya?
React ialah salah satu perpustakaan paling popular yang digunakan dalam pembangunan web hari ini. Ia telah merevolusikan cara aplikasi web dibina, menjadikannya lebih mudah dan lebih cekap berbanding sebelum ini. Salah satu sebab utama popularitinya ialah pengenalan cangkuk, yang telah memudahkan pembangun mengurus keadaan dalam aplikasi mereka.
Dalam artikel ini, kita akan melihat dengan lebih dekat apakah cangkuk dan cara ia boleh digunakan dalam aplikasi React. Kami akan bermula dengan membincangkan konsep keadaan dalam React, sebelum meneruskan untuk menerangkan apa itu cangkuk dan cara ia berfungsi. Kami juga akan memberikan contoh bagaimana cangkuk boleh digunakan dalam pelbagai jenis aplikasi React.
Keadaan dalam React
Sebelum kita boleh membincangkan cangkuk, kita perlu terlebih dahulu memahami konsep keadaan dalam React. Dalam React, keadaan digunakan untuk mengurus data yang digunakan oleh komponen. Data ini boleh menjadi apa sahaja daripada rentetan atau nombor kepada tatasusunan atau objek. Apabila keadaan komponen berubah, React secara automatik memaparkan semula komponen untuk mencerminkan keadaan baharu.
Terdapat dua cara untuk mengurus keadaan dalam React: menggunakan komponen kelas dan menggunakan komponen berfungsi. Komponen kelas menggunakan kaedah khas yang dipanggil setState untuk mengemas kini keadaan komponen, manakala komponen berfungsi bergantung pada cangkuk untuk mengurus keadaan.
Apa itu Hooks?
Cangkuk ialah ciri baharu dalam React yang diperkenalkan dalam versi 16.8. Mereka membenarkan pembangun menggunakan keadaan dan ciri React lain dalam komponen berfungsi. Ini bermakna pembangun kini boleh mencipta komponen yang menggunakan keadaan tanpa perlu menggunakan komponen kelas.
Cangkuk datang dalam bentuk yang berbeza, setiap satu mempunyai tujuan yang berbeza. Cangkuk yang paling biasa digunakan ialah useState, useEffect, useContext, dan useReducer. Kami akan membincangkan setiap cangkuk ini dengan lebih terperinci di bawah.
useState
Cangkuk useState digunakan untuk mengurus keadaan dalam komponen berfungsi. Ia memerlukan nilai awal sebagai hujah dan mengembalikan tatasusunan yang mengandungi keadaan semasa dan fungsi yang boleh digunakan untuk mengemas kini keadaan. Berikut ialah contoh cara useState boleh digunakan:
```javascript
import React, { useState } daripada "react";
contoh fungsi() {
const [count, setCount] {{0}} useState(0);
kembali (
Anda mengklik {count} kali
);
}
```
Dalam contoh ini, kami menggunakan useState untuk mengurus keadaan pembilang. Nilai awal pembilang ditetapkan kepada 0 menggunakan useState. Kami kemudian menggunakan setCount untuk mengemas kini nilai kaunter setiap kali butang diklik.
useEffect
Cangkuk useEffect digunakan untuk melakukan kesan sampingan dalam komponen berfungsi. Kesan sampingan ialah sebarang tindakan yang dilakukan di luar komponen, seperti mengambil data daripada API atau mengemas kini tajuk halaman.
Cangkuk useEffect mengambil dua hujah: fungsi yang melaksanakan kesan sampingan dan tatasusunan kebergantungan. Fungsi dipanggil setiap kali komponen diberikan dan kebergantungan digunakan untuk menentukan bila fungsi harus dipanggil. Berikut adalah contoh cara useEffect boleh digunakan:
```javascript
import React, { useState, useEffect } daripada "react";
contoh fungsi() {
const [count, setCount] {{0}} useState(0);
useEffect(() => {
document.title=`Anda mengklik ${count} kali`;
}, [kiraan]);
kembali (
Anda mengklik {count} kali
);
}
```
Dalam contoh ini, kami menggunakan useEffect untuk mengemas kini tajuk halaman setiap kali kaunter dikemas kini. Kami menghantar tatasusunan yang mengandungi pembolehubah kiraan kepada useEffect, yang memberitahu React untuk hanya memanggil fungsi apabila kiraan berubah.
gunakanKonteks
Cangkuk useContext digunakan untuk mengakses data yang disimpan dalam pembekal konteks. Konteks ialah cara untuk berkongsi data antara komponen tanpa menurunkannya melalui prop.
Untuk menggunakan useContext, kita perlu mencipta penyedia konteks menggunakan fungsi createContext. Kami kemudiannya boleh menggunakan useContext untuk mengakses data yang disimpan dalam pembekal. Berikut adalah contoh cara useContext boleh digunakan:
```javascript
import React, { useState, useContext } daripada "react";
const ThemeContext=React.createContext("light");
contoh fungsi() {
const [tema, setTheme]=useState("cahaya");
kembali (
);
}
function Bar Alat() {
const theme=useContext(ThemeContext);
kembali (
Tema semasa ialah: {theme}
);
}
```
Dalam contoh ini, kami menggunakan useContext untuk mengakses pembolehubah tema yang disimpan dalam penyedia ThemeContext. Kita boleh mengemas kini pembolehubah tema dengan mengklik butang dalam komponen Contoh.
useReducer
Cangkuk useReducer digunakan untuk mengurus keadaan kompleks dalam komponen berfungsi. Ia serupa dengan cangkuk useState, tetapi bukannya mengemas kini keadaan secara langsung, ia menggunakan fungsi pengurang untuk mengemas kini keadaan.
Fungsi pengurang mengambil dua hujah: keadaan semasa dan objek tindakan. Ia mengembalikan keadaan baharu berdasarkan tindakan yang telah dilakukan. Cangkuk useReducer mengambil fungsi pengurang dan keadaan awal sebagai argumen, dan mengembalikan tatasusunan yang mengandungi keadaan semasa dan fungsi penghantaran yang boleh digunakan untuk melaksanakan tindakan. Berikut adalah contoh cara useReducer boleh digunakan:
```javascript
import React, { useReducer } daripada "react";
pengurang fungsi(keadaan, tindakan) {
suis (action.type) {
kes "kenaikan":
pulangkan { count: state.count + 1 };
kes "penurunan":
pulangkan { count: state.count - 1 };
lalai:
buang Ralat baru();
}
}
contoh fungsi() {
const [state, dispatch] {{0}} useReducer(reducer, { count: 0 });
kembali (
Anda mengklik {state.count} kali
);
}
```
Dalam contoh ini, kami menggunakan useReducer untuk mengurus keadaan pembilang. Kami meneruskan fungsi pengurang yang mengemas kini pembolehubah kiraan berdasarkan tindakan yang telah dilakukan. Kami kemudian menggunakan fungsi penghantaran untuk melaksanakan tindakan.
Kesimpulan
Cangkuk telah menjadikannya lebih mudah berbanding sebelum ini untuk mengurus keadaan dalam aplikasi React. Mereka membenarkan kami mencipta komponen berfungsi yang boleh menggunakan keadaan dan ciri React yang lain, tanpa perlu menggunakan komponen kelas. Dalam artikel ini, kami telah membincangkan cangkuk yang paling biasa digunakan dalam React: useState, useEffect, useContext dan useReducer. Kami juga telah memberikan contoh bagaimana cangkuk ini boleh digunakan dalam pelbagai jenis aplikasi React.
Dengan memahami cara cangkuk berfungsi dan cara menggunakannya, anda boleh menulis kod yang lebih cekap dan boleh diselenggara dalam aplikasi React anda. Jika anda belum melakukannya, kami menggalakkan anda untuk mula menggunakan cangkuk dalam projek anda sendiri dan rasai manfaat yang dibawanya kepada aliran kerja pembangunan anda.