Tüm blog yazıları

Frontend

React component tasarımında 7 sadeleştirme prensibi

Büyük componentleri küçültmek, prop karmaşasını azaltmak ve yeniden kullanılabilir arayüz parçaları tasarlamak için uygulanabilir bir kontrol listesi.

BilGen Akademi5 Ağustos 20266 dk okuma
REACT · UI ARCHITECTURE

BilGen Akademi

Teknik Blog

İyi bir React component sadece çalışan component değildir. Okunduğunda niyeti anlaşılmalı, değişiklik yapıldığında beklenmedik yan etkiler üretmemeli ve gereksiz soyutlama taşımamalıdır.

Componentin tek bir ana sorumluluğu olsun

Bir component aynı anda veri çekiyor, form yönetiyor, modal kontrol ediyor ve büyük bir liste çiziyorsa ayrıştırma zamanı gelmiştir. Önce davranışları değil, sorumluluk sınırlarını belirleyin.

State'i ihtiyaç duyulan yere yakın tutun

Her state'i global store'a taşımak uygulamayı daha mimari yapmaz. Sadece bir filtre panelini ilgilendiren state, o panel ya da en yakın ortak parent içinde kalmalıdır.

  • Sunucu verisi ile UI state'ini ayırın
  • Türetilmiş değerler için gereksiz state oluşturmayın
  • Prop zinciri uzadığında önce component sınırını sorgulayın

Sonraki adım

Öğrendiklerini gerçek bir projede uygula

BilGen Akademi eğitimleri, konuyu sadece okumak yerine adım adım proje geliştirerek pekiştirmen için hazırlanır.

Kursları incele