Refs dalam React

Jika kita ingin mengingati beberapa maklumat, tetapi tidak mahu perubahannya menyebabkan komponen dirender semula, maka kita memerlukan refs dan sepadannya hook useRef yang berfungsi dengannya.

Ref (atau rujukan) ialah objek JavaScript biasa dengan satu sifat current yang boleh anda baca atau ubah.

Seperti state, refs boleh menyimpan sebarang jenis data - ini boleh jadi nombor, string, objek dan juga fungsi.

Jika data anda digunakan untuk rendering, maka simpan dalam state, dan jika anda tidak memerlukan rendering, dalam kes itu, penggunaan refs mungkin menjadi lebih berkesan. Tambahan pula, tidak seperti state, nilai ref berubah secara serta-merta.

Secara umumnya, refs digunakan di mana anda perlu menyimpang dari React dan berinteraksi dengan API luaran - selalunya dengan API pelayar, yang tidak mempengaruhi paparan komponen. Ini mungkin contohnya menyimpan id pemasa atau menyimpan objek, yang tidak perlu dihitung JSX, tetapi selalunya ini adalah interaksi dengan elemen DOM. Ia boleh digunakan untuk mengawal fokus, pemilihan teks atau main balik media.

Pada pelajaran seterusnya, kita akan menganalisis kerja dengan refs dan hook useRef secara praktikal.