Ölçüm yapma
- React kursu
- Orta seviye
- Ders 66/80
- 4 dk
ref ile bir elemanın boyutunu ölçmeyi öğrenirsin.
Ölçüm yapma
useRef ile DOM düğümlerine erişip ölçüm yapabilirsin. Bir ref özniteliği ile düğümü yakalar, ref.current.offsetWidth gibi özelliklerle boyut okursun.
Ölçüm genellikle useEffect içinde yapılır; çizim bittikten sonra DOM hazır olur. Ölçüm sonucunu state'e yazarsan bileşen yeniden çizilir ve ölçüm ekrana yansır.
Ölçüm maliyetlidir; her çizimde yapmak yerine yalnızca gerektiğinde yap. ResizeObserver ile boyut değişimini izlemek yaygındır.
useLayoutEffect vs useEffect
Ölçüm için iki seçenek var: useEffect ve useLayoutEffect. useLayoutEffect çizim öncelesi senkron çalışır; tarayıcı boyama yapmadan önce. Bu, yer sıçramasını önler.
useEffect ise çizim sonrası asenkron çalışır; tarayıcı önce çizer, sonra ölçüm yapılır. Kısa bir titreme görülebilir.
Ölçüm sonucuna göre still değiştiriyorsan useLayoutEffect tercih edilir; yalnızca veri okuyorsan useEffect yeterlidir.
Uygulama Genişlik ölçümü
Aşağıdaki iskeleti tamamla. MeasureBox bileşeni yaz; useRef(null) ile boxRef al, useEffect içinde boxRef.current.offsetWidth oku ve setWidth ile state'e yaz, <div ref={boxRef}> çiz. Dışa aktar.
Başlangıç kodu
import { useRef, useEffect, useState } from "react";
// MeasureBox bileşenini buraya yazÖrnek çözüm
import { useRef, useEffect, useState } from "react";
function MeasureBox() {
const boxRef = useRef(null);
const [width, setWidth] = useState(0);
useEffect(() => {
if (boxRef.current) setWidth(boxRef.current.offsetWidth);
}, []);
return <div ref={boxRef}>Genişlik: {width}px</div>;
}
export default MeasureBox;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Ölçüm hangi hook içinde yapılır?
- useMemo
- useState
- useEffect Doğru cevap
- useCallback
Açıklama: Ölçüm useEffect içinde yapılır; DOM hazır olur.
2 offsetWidth okuma
useEffect(() => {
if (boxRef.current) {
setWidth(boxRef.current.____);
}
}, []);useEffect(() => {
if (boxRef.current) {
setWidth(boxRef.current.offsetWidth);
}
}, []);Açıklama: offsetWidth öğenin genişliğini piksel olarak verir.
3 Ölçüm yapma: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useRef |
DOM düğümü |
offsetWidth |
Genişlik ölçümü |
useEffect |
Çizim sonrası |
useLayoutEffect |
Çizim öncelesi |