Anda mungkin sudah tahu tentang React hook dan bahkan hook dasar apa yang ditawarkan framework. Hooks memungkinkan Anda mengelola status dan fitur lainnya tanpa harus menulis kelas. Kait dasarnya adalah gunakanNegara, gunakanEfek, dan gunakanKonteks. Dalam artikel ini, Anda akan mempelajari tentang beberapa kait tambahan yang menambahkan perilaku yang lebih rumit.

Kait tambahan yang akan Anda pelajari adalah gunakanRef dan gunakanMemo.

gunakanRef

NS gunakanRef fungsi mengembalikan objek ref yang bisa berubah dan menginisialisasi .saat ini properti ke argumen yang diteruskan. Orang sering bingung menggunakan gunakanRef kait dengan gunakanNegara kait. Anda dapat menginstruksikan pengait ini untuk menyimpan referensi dari elemen HTML. Dengan menggunakan referensi ini, Anda dapat dengan mudah memanipulasi elemen tersebut.

NS gunakanRef hook hanya memiliki satu properti di dalamnya: .saat ini. React tidak merender ulang halaman saat elemennya berubah. Juga tidak merender ulang jika Anda mengubah nilai file .

saat ini Properti. Mari kita pahami penggunaan hook ini dengan sebuah contoh:

import React, { useState, useRef } dari 'react';
ekspor fungsi default App() {
const count = useRef (null);
const [angka, setNumber] = useState (0);
const checkNumber = () => {
if (hitung.saat ini.nilai < 10) {
count.current.style.backgroundColor = "merah";
} lain {
count.current.style.backgroundColor = "hijau";
}
};
kembali (


Masukkan angka yang lebih besar dari 10

ref={hitung}
ketik="teks"
nilai={angka}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Klik



);
}

Pada kode di atas, warna elemen input berubah sesuai dengan angka yang Anda masukkan di kotak input. Pertama, ia menetapkan hasil dari gunakanRef() kait ke menghitung variabel. Ada dua elemen: input dan tombol. Elemen input memiliki nilai nomor dan, ref properti dari tag input adalah menghitung untuk mencocokkan variabel.

Saat Anda mengklik tombol tersebut, periksaNomor() fungsi dipanggil. Fungsi ini memeriksa untuk melihat apakah nilai dari nomor lebih besar dari 10. Itu kemudian mengatur warna latar belakang dari elemen input menggunakan count.current.style.backgroundColor Properti.

Terkait: Dasar-dasar CSS: Bekerja dengan Warna

gunakanMemo

Kait useMemo akan menghitung ulang nilai yang di-cache ketika salah satu dependensinya berubah. Pengoptimalan ini membantu menghindari perhitungan mahal pada setiap render.

Sintaks dari gunakanMemo kait adalah sebagai berikut:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

Untuk pemahaman yang lebih baik, mari kita pertimbangkan sebuah contoh. Kode di bawah ini mengubah warna dua judul. Ini memanggil gunakanNegara kait untuk melacak nilai-nilai mereka. Suatu fungsi menunjukkan apakah warnanya panas atau dingin menurut nilainya. Sebelum mengembalikan status warna, ada loop while yang berhenti selama kurang lebih satu detik. Ini untuk tujuan demonstrasi, untuk menjelaskan manfaat dari gunakanMemo kait.

import React, { useState, useMemo } dari 'react';
ekspor fungsi default App() {
const [warna1, setColor1] = useState("biru");
const [color2, setColor2] = useState("hijau");
const toggleColor1 = () => {
mengembalikan warna1 "biru"? setColor1("merah"): setColor1("biru");
};
const toggleColor2 = () => {
warna2 "hijau"? setColor2("oranye"): setColor2("hijau");
};
const warna tampilan = () => {
var sekarang = Tanggal baru().getTime();
while (Tanggal baru().getTime() < sekarang + 1000);
mengembalikan warna1 "biru"? "keren": "panas";
};
kembali (


Warna teks 1: {color1}

Ini adalah warna {displayColor()}

Beralih Warna
Warna teks 2: {color2}

Beralih Warna



);
}

Ketika Anda mengklik toggleTombol1, Anda akan melihat sedikit penundaan saat status berubah. Perhatikan bahwa ada juga penundaan saat Anda mengklik toggleButton2. Tapi ini seharusnya tidak terjadi, karena jeda satu detik terjadi di tampilanWarna. Di halaman ini, tombol harus mampu bertindak secara independen. Untuk mencapai ini, Anda dapat menggunakan gunakanMemo kait.

Anda perlu membungkusnya tampilanWarna fungsi dalam gunakanMemo kait dan pas warna1 dalam larik ketergantungan.

const displayColor = useMemo(() => {
var sekarang = Tanggal baru().getTime();
while (Tanggal baru().getTime() < sekarang + 1000);
mengembalikan warna1 "biru"? "keren": "panas";
}, [warna1]);

NS gunakanMemo hook mengambil fungsi dan dependensi sebagai parameter. NS gunakanMemo hook hanya akan dirender ketika salah satu dependensinya berubah. Ini berguna dalam situasi ketika Anda harus mengambil dari API.

Apa yang Harus Dilakukan Selanjutnya Setelah Mempelajari Hooks

Hooks adalah fitur yang sangat kuat dan biasanya digunakan dalam proyek React. Mereka memberikan banyak potensi untuk pengoptimalan. Anda dapat berlatih mengait dengan membuat proyek kecil seperti formulir atau penghitung jam.

Ada kait canggih lainnya seperti gunakan Peredam, gunakanLayoutEffect, dan gunakanDebugValue. Anda dapat mempelajarinya dengan merujuk ke dokumentasi resmi React.

7 Tutorial Gratis Terbaik untuk Belajar Bereaksi dan Membuat Aplikasi Web

Kursus gratis jarang sekali selengkap dan membantu -- tetapi kami telah menemukan beberapa kursus React yang sangat baik dan akan membantu Anda memulai dengan langkah yang benar.

Baca Selanjutnya

Tentang Penulis