Hook useRef untuk Bekerja dengan Rujukan (Refs) dalam React

Pada pelajaran ini, kita akan bekerja dengan rujukan (refs). Untuk lebih jelas, mari kita kaji cara hook useRef berbanding dengan hook useState.

Mari kita buat komponen dengan butang:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Import useState ke dalam komponen:

import { useState } from 'react';

Dan wujudkan state state:

const [state, setState] = useState(0);

Dan sekarang, mari kita buat supaya apabila butang diklik, state kita akan meningkat sebanyak 1. Nilai state akan dipaparkan terus dalam teks butang:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Terangkan fungsi untuk pemprosesan klik pada butang handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Klik butang beberapa kali dan kita akan lihat bagaimana nilai state meningkat.

Dan sekarang mari kita buat komponen App, tetapi menggunakan bukan state, sebaliknya ref.

Sebagai permulaan, import useRef ke dalam komponen:

import { useRef } from 'react';

Dan wujudkan ref ref. Hook useRef mengembalikan objek ref dengan satu sifat current, yang akan menjadi perhatian kita seterusnya. Tetapkan nilai awalnya kepada 0:

const ref = useRef(0);

Lampirkan pemproses klik pada butang. Ingat, kita harus membaca/mengubah bukan ref itu sendiri, sebaliknya sifatnya current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Tambahkan fungsi untuk pemprosesan klik pada butang kita. Di sini kita akan meningkatkan current sebanyak 1, seperti dalam contoh sebelumnya dengan state. Berbeza dengan state, di mana fungsi setState diperlukan untuk mengubah nilainya, kita bekerja dengan sifat ref secara langsung:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Sekarang klik butang kita beberapa kali. Dan apa yang kita lihat? Apabila diklik, nilai yang asalnya 0, tetap tidak berubah.

Anda tentu boleh mula meragui sama ada nilai itu benar-benar berubah. Mari kita semaknya. Untuk itu, dalam fungsi pemproses klik, tambahkan satu baris kod lagi untuk memaparkan nilai current ke konsol:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Dan sekarang, dengan membuka konsol dalam pelayar, sekali lagi klik butang dan pastikan bahawa nilai memang berubah pada setiap klik dan tiada penipuan.

Sekarang kita lihat bahawa berbeza dengan state, perubahan nilai ref tidak menyebabkan komponen dirender semula. Itulah sebabnya kita setiap kali dalam teks butang melihat nilai awal 0.

Oleh itu, jika data anda digunakan untuk rendering, maka simpanlah dalam state, dan jika anda tidak memerlukan rendering, dalam kes itu, penggunaan ref mungkin menjadi lebih berkesan.

Katakan dalam komponen anda ada perenggan dengan teks 'text' dan butang. Buat supaya setiap kali butang diklik tanda seru ditambah pada hujung teks perenggan. Lakukan ini menggunakan state.

Buat komponen App, tetapi gantikan state kini dengan ref. Pastikan bahawa apabila butang ditekan, teks perenggan tidak akan berubah. Tambahkan juga paparan teks perenggan ke konsol, buka konsol dan pastikan, bahawa sebenarnya teks itu berubah.