React Profiler
- React Native kursu
- Uzman
- Ders 8/47
- 5 dk
React Profiler ve render sürelerini öğrenirsin.
React Profiler
React, bileşen başına render süresini ölçen Profiler bileşeni verir. <Profiler> ile sarılan her bileşen için onRender callback'i çağrılır ve ayrıntılı süre bilgisi verir.
Callback; bileşen kimliği, aşama (mount/update) ve geçen süreleri alır. Bu, hangi bileşenin yavaş olduğunu görmeyi sağlar. React DevTools'ta görsel Profiler da vardır; grafik olarak süreleri çizer.
Render aşamaları
Profiler phase parametresi iki değer alır: mount (ilk render) ve update (state/props değişti). Her aşamanın süresi farklıdır; mount genelde daha uzundur ve tüm alt bileşenleri çizer.
actualDuration bu render'ın gerçekte aldığı süredir. baseDuration memoization olmadan alacağı süredir. İkisi arasındaki fark memo kazancını gösterir.
Uygulama Profiler ile sarma
Bir List bileşenini Profiler ile sar. onRender callback'i (id, phase, actualDuration) => console.log(id, phase, actualDuration) olsun. Profiler'ı React'ten içe aktar.
Başlangıç kodu
import React from 'react';
function List() {
return null;
}
// List'i Profiler ile sar ve dışa aktarÖrnek çözüm
import React, { Profiler } from 'react';
function List() {
return null;
}
const WrappedList = () => (
<Profiler id="list" onRender={(id, phase, actualDuration) => console.log(id, phase, actualDuration)}>
<List />
</Profiler>
);
export default WrappedList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Profiler callback adı
<Profiler ____={(id, phase, actualDuration) => console.log(id, phase)}><Profiler onRender={(id, phase, actualDuration) => console.log(id, phase)}>Açıklama: onRender her render'da çağrılır.
2 actualDuration neyi ölçer?
- Bu render'ın gerçek süresini
- Toplam uygulama boyutunu
- Ağ istek sayısını
- Bellek kullanımını Doğru cevap
Açıklama: actualDuration bu render'ın gerçek süresidir.
3 Profiler parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
mount |
İlk render |
update |
State/props değişti |
actualDuration |
Gerçek süre |
baseDuration |
Memoization'sız süre |