React Academy · Ders

Profiler Sekmesini Kullanma

Oluşturmaları kaydedin, alev grafiklerini okuyun ve yavaş bileşenleri belirleyin.

Profiler Sekmesini Kullanma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React DevTools Profil oluşturucusunu kullanarak oluşturmaları kaydedecek, alev grafiklerini okuyacak ve performans darboğazlarına neden olan bileşenleri belirleyeceksiniz.

Profil Oluşturucuyu Açma

React DevTools'ta (Bileşenler sekmesinin yanında) **Profil oluşturucu** sekmesine tıklayın. Bir Kayıt düğmesi (daire) ile Yenile ve profil oluştur düğmesini göreceksiniz. Profil oluşturucu yalnızca geliştirme modunda çalışır.

Oturum Kaydetme

**Kayıt** düğmesine (daire) tıklayın, uygulamanızla etkileşim kurun (örneğin bir düğmeye tıklayın veya bir giriş alanına yazın), ardından **Durdur** düğmesine (kare) tıklayın. DevTools, oturum sırasında gerçekleşen her oluşturma işlemini yakalar.

Alev Grafiğini Okuma

Alev grafiği, her değişiklik uygulaması için bileşen başına bir çubuk gösterir. Genişlik = oluşturma için harcanan süre. Uzun yığınlar = derin bileşen ağaçları. Bileşen adını ve tam oluşturma süresini görmek için bir çubuğun üzerine gelin.

Değişiklik Uygulamaları Zaman Çizelgesi

Profil oluşturucunun üst kısmında, her React değişiklik uygulaması için bir tane olmak üzere küçük çubuklardan oluşan bir satır görürsünüz. Daha uzun çubuklar daha yavaş uygulamaları temsil eder. O uygulamanın alev grafiğine geçmek için bir çubuğa tıklayın.

Bir Bileşen Neden render Edildi

Alev grafiğinde bir bileşen seçin ve **Bu neden render edildi?** bölümüne bakın. Bu bölüm, bileşenin özellikleri değiştiği, durumu değiştiği veya bir üst bileşen yeniden render edildiği için mi render edildiğini gösterir.

Gri ve Renkli Çubuklar

Gri çubuklar, bileşenin bu işlemde render edilmediği anlamına gelir (React önceki çıktıyı yeniden kullandı). Renkli çubuklar, bileşenin yeniden render edildiğini gösterir — daha koyu renkler daha uzun render sürelerini belirtir.

Sıralı Grafik Görünümü

Alev Grafiği görünümünden **Sıralı** grafiğe geçin (üstteki anahtarı kullanın). Bu görünüm, render edilen tüm bileşenleri render süresine göre sıralar ve en yavaş bileşeni hemen fark etmenizi kolaylaştırır.

Kaydetme ve Yeniden Yükleme

İlk render işlemleri de dâhil olmak üzere sayfa yüklemesini yakalamak için Kayıt düğmesi yerine **Yeniden Yükle ve Profil Oluştur** düğmesine tıklayın. Bu, ilk bağlama sırasında yavaş olan bileşenleri bulmanıza yardımcı olur.

Üretimde Profil Oluşturmayı Etkinleştirme

Üretim derlemelerinde Profil oluşturucu varsayılan olarak devre dışıdır. Üretimde profil oluşturmak için `react-dom/profiling` öğesini bir takma ad ve `scheduler/tracing-profiling` öğesini kullanarak derleme yapın. Ekiplerin çoğu önce geliştirme ortamında profil oluşturur.

Hızlı Kontrol

React DevTools Profil oluşturucusunun alev grafiğinde bir çubuğun genişliği neyi temsil eder?

Özet

Artık bir profil oluşturucu oturumunu kaydedebilir, alev grafiklerini ve sıralı grafikleri okuyabilir, bir bileşenin neden yeniden render edildiğini kontrol edebilir ve render işlemleri arasında gezinmek için işlem zaman çizelgesini kullanabilirsiniz.

Sırada

Sonraki ders: **Yaygın React Hatalarında Hata Ayıklama** — DevTools ve tarayıcı konsolunu kullanarak eksik anahtar uyarılarını, tanımsız durum hatalarını ve hidrasyon uyuşmazlıklarını teşhis edeceksiniz.

Sıkça Sorulan Sorular

“Profiler Sekmesini Kullanma” dersi ücretsiz mi?

Evet — “Profiler Sekmesini Kullanma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Profiler Sekmesini Kullanma” dersinde ne öğreneceğim?

Oluşturmaları kaydedin, alev grafiklerini okuyun ve yavaş bileşenleri belirleyin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Profiler Sekmesini Kullanma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

React DevTools'u Kurma ve Açma
Bileşen Ağaçlarını ve Props'ları İnceleme
Profiler Sekmesini Kullanma
Yaygın React Hatalarını Ayıklama

← React Academy Sayfasına Dön