useRef
- React Native kursu
- Orta seviye
- Ders 4/116
- 5 dk
useRef ile mutable referans öğrenirsin.
useRef nedir?
useRef mutable (değiştirilebilir) bir referans tutan hook'tur. const ref = useRef(0) yazdığında ref.current ilk değer olarak 0 olur. ref.current = 5 atamasıyla değerini değiştirirsin; bu atama yeniden render tetiklemez.
İki yaygın kullanım vardır: birincisi bir DOM düğümüne veya bileşene erişmek (örnek <TextInput ref={inputRef} />); ikincisi yeniden render tetiklemeden tutulan bir değer saklamak (örnek zamanlayıcı kimliği). useRef'i react paketinden içe aktar: import { useRef } from "react";.
ref ile TextInput'a eriş
React Native'te ref özniteliği ile bir TextInput'a erişebilirsin. const inputRef = useRef(null) yazıp <TextInput ref={inputRef} /> verirsin. Sonra inputRef.current.focus() ile programlı olarak odaklanırsın.
Bu desen form ekranlarında çok kullanışlıdır: kullanıcı bir butona basınca bir sonraki alana otomatik geçiş yaptırabilirsin. ref.current başlangıçta null olur; bileşen mount olduğunda React düğümü atar, unmount olduğunda tekrar null yapar.
Uygulama useRef ile sayaç tut
Bir Counter bileşeni yaz. useRef ile countRef oluştur (ilk değer 0). Bir butona basıldığında countRef.current'i bir artır ve console.log ile yaz. Bileşen <Text>Sayaç</Text> döndürsün.
Başlangıç kodu
// useRef'i içe aktar
function Counter() {
// useRef ile bir sayaç referansı oluştur (ilk değer 0)
function handlePress() {
// referansın değerini artır ve yaz
}
return <Text>Sayaç</Text>;
}Örnek çözüm
import { useRef } from "react";
import { Text } from "react-native";
function Counter() {
const countRef = useRef(0);
function handlePress() {
countRef.current += 1;
console.log(countRef.current);
}
return <Text>Sayaç</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ref.current değişince ne olur?
const ref = useRef(0);
ref.current = 5;- Bileşen yeniden render edilir
- Bileşen kaldırılır
- Hata fırlatılır
- Hiçbir şey olmaz, yeniden render tetiklenmez Doğru cevap
Açıklama: useRef ataması render tetiklemez.
2 ref özniteliğini ekle
<TextInput ____={inputRef} placeholder="Ad" /><TextInput ref={inputRef} placeholder="Ad" />Açıklama: ref özniteliği referansı bağlar.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useRef |
Mutable referans |
ref.current |
Tutulan değer |
null |
İlk değer |
focus() |
Odağı programlı kurar |