Kait Bereaksi
Kait ditambahkan ke React di versi 16.8.
Hooks memungkinkan komponen fungsi memiliki akses ke status dan fitur React lainnya. Karena itu, komponen kelas umumnya tidak lagi diperlukan.
Meskipun Hooks umumnya menggantikan komponen kelas, tidak ada rencana untuk menghapus kelas dari React.
Apa itu Hook?
Hooks memungkinkan kita untuk "menghubungkan" ke fitur React seperti status dan metode siklus hidup.
Contoh:
Berikut adalah contoh Hook. Jangan khawatir jika itu tidak masuk akal. Kami akan membahas lebih detail di bagian berikutnya .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Anda harus importMengait dari react.
Di sini kita menggunakan useStateHook untuk melacak status aplikasi.
Status umumnya mengacu pada data aplikasi atau properti yang perlu dilacak.
Aturan Kait
Ada 3 aturan untuk hook:
- Hooks hanya dapat dipanggil di dalam komponen fungsi React.
- Kait hanya dapat dipanggil di tingkat atas suatu komponen.
- Kait tidak bisa bersyarat
Catatan: Hooks tidak akan berfungsi di komponen kelas React.
Kait Khusus
Jika Anda memiliki logika stateful yang perlu digunakan kembali di beberapa komponen, Anda dapat membuat Hooks kustom Anda sendiri.
Kami akan membahas lebih detail di bagian Kait Kustom .