M

MLOG

Türkçe

React'ın Fiber mimarisine derinlemesine bir bakış, mutabakat sürecini, faydalarını ve uygulama performansını nasıl iyileştirdiğini açıklıyor.

React Fiber Mimarisi: Mutabakat Sürecini Anlamak

React, bileşen tabanlı mimarisi ve bildirime dayalı programlama modeli ile ön uç geliştirmede devrim yarattı. React'ın verimliliğinin kalbinde, React'ın gerçek DOM'u bileşen ağacındaki değişiklikleri yansıtacak şekilde güncelleme mekanizması olan mutabakat süreci yer alır. Bu süreç, Fiber mimarisiyle doruk noktasına ulaşarak önemli bir evrim geçirmiştir. Bu makale, React Fiber'ı ve mutabakat üzerindeki etkisini kapsamlı bir şekilde anlamanızı sağlayacaktır.

Mutabakat Nedir?

Mutabakat, React'ın önceki sanal DOM'u yeni sanal DOM ile karşılaştırmak ve gerçek DOM'u güncellemek için gereken minimum değişiklik kümesini belirlemek için kullandığı algoritmadır. Sanal DOM, bellekteki bir kullanıcı arayüzü temsilidir. Bir bileşenin durumu değiştiğinde, React yeni bir sanal DOM ağacı oluşturur. Gerçek DOM'u doğrudan değiştirmek yerine (bu yavaş bir işlemdir), React yeni sanal DOM ağacını öncekiyle karşılaştırır ve farklılıkları belirler. Bu işleme fark çıkarma denir.

Mutabakat süreci iki ana varsayım tarafından yönlendirilir:

Geleneksel Mutabakat (Fiber'dan Önce)

React'ın ilk uygulamasında, mutabakat süreci senkron ve bölünmezdi. Bu, React sanal DOM'u karşılaştırmaya ve gerçek DOM'u güncellemeye başladığında işlemin kesintiye uğrayamayacağı anlamına geliyordu. Bu, özellikle büyük bileşen ağaçlarına sahip karmaşık uygulamalarda performans sorunlarına yol açabilirdi. Bir bileşen güncellemesi uzun sürerse, tarayıcı yanıt vermez hale gelir ve bu da kötü bir kullanıcı deneyimine neden olurdu. Bu genellikle "takılma" sorunu olarak adlandırılır.

Bir ürün kataloğu görüntüleyen karmaşık bir e-ticaret sitesini hayal edin. Bir kullanıcı bir filtreyle etkileşimde bulunursa ve bu da kataloğun yeniden oluşturulmasını tetiklerse, senkron mutabakat süreci ana iş parçacığını engelleyebilir ve tüm katalog yeniden oluşturulana kadar kullanıcı arayüzünü yanıtsız bırakabilir. Bu birkaç saniye sürebilir ve kullanıcı için hayal kırıklığına neden olabilir.

React Fiber'a Giriş

React Fiber, React 16'da tanıtılan React'ın mutabakat algoritmasının tamamen yeniden yazılmış halidir. Birincil amacı, özellikle karmaşık senaryolarda React uygulamalarının yanıt verme ve algılanan performansını iyileştirmektir. Fiber, bunu mutabakat sürecini daha küçük, kesilebilir iş birimlerine ayırarak başarır.

React Fiber'ın arkasındaki temel kavramlar şunlardır:

Fiber Mimarisi'nin Faydaları

Fiber mimarisi çeşitli önemli faydalar sağlar:

İşbirliğine dayalı bir belge düzenleme uygulamasını düşünün. Fiber ile farklı kullanıcılar tarafından yapılan düzenlemeler farklı önceliklerle işlenebilir. Mevcut kullanıcının gerçek zamanlı yazması en yüksek önceliği alır ve anında geri bildirim sağlar. Diğer kullanıcılardan gelen güncellemeler veya arka plan otomatik kaydetme işlemleri daha düşük öncelikle işlenebilir, bu da aktif kullanıcının deneyimindeki kesintiyi en aza indirir.

Fiber Yapısını Anlamak

Her React bileşeni bir Fiber düğümü tarafından temsil edilir. Fiber düğümü, bileşenin türü, prop'ları, durumu ve ağaçtaki diğer Fiber düğümleriyle olan ilişkileri hakkında bilgi tutar. İşte bir Fiber düğümünün bazı önemli özellikleri:

alternate özelliği özellikle önemlidir. React'ın bileşenin önceki ve mevcut durumlarını takip etmesine olanak tanır. Mutabakat süreci sırasında, DOM'da yapılması gereken değişiklikleri belirlemek için React mevcut Fiber düğümünü alternate ile karşılaştırır.

WorkLoop Algoritması

İş döngüsü, Fiber mimarisinin çekirdeğidir. Fiber ağacında gezinmek ve her fiber için gerekli işi yapmakla sorumludur. İş döngüsü, fiberleri tek tek işleyen özyinelemeli bir fonksiyon olarak uygulanır.

İş döngüsü iki ana aşamadan oluşur:

İşleme Aşaması Detaylı

İşleme aşaması iki alt aşamaya ayrılabilir:

beginWork fonksiyonu şu görevleri yerine getirir:

  1. Bileşenin güncellenmesi gerekip gerekmediğini kontrol eder.
  2. Bileşenin güncellenmesi gerekiyorsa, yeni prop'ları ve durumu önceki prop'lar ve durumla karşılaştırarak yapılması gereken değişiklikleri belirler.
  3. Bileşenin çocukları için yeni Fiber düğümleri oluşturur.
  4. DOM üzerinde yapılması gereken güncellemenin türünü belirtmek için Fiber düğümünde effectTag özelliğini ayarlar.

completeWork fonksiyonu şu görevleri yerine getirir:

  1. beginWork fonksiyonu sırasında belirlenen değişikliklerle DOM'u günceller.
  2. Bileşenin düzenini hesaplar.
  3. İşleme aşamasından sonra gerçekleştirilmesi gereken yan etkileri toplar.

İşleme Aşaması Detaylı

İşleme aşaması, değişiklikleri DOM'a uygulamaktan sorumludur. Bu aşama kesilemez, yani React başladığında tamamlanması gerekir. İşleme aşaması üç alt aşamadan oluşur:

Pratik Örnekler ve Kod Parçacıkları

Fiber mutabakat sürecini basitleştirilmiş bir örnekle açıklayalım. Bir öğe listesi görüntüleyen bir bileşeni ele alalım:

function ItemList({ items }) {
  return (
    
    
      {items.map(item => (
        
  • {item.name}
    • 
      ))}
    

  );
}

items prop'u değiştiğinde, React listeyi mutabık kılmalı ve DOM'u buna göre güncellemelidir. Fiber'ın bunu nasıl ele alacağı aşağıdadır:

  1. İşleme Aşaması: beginWork fonksiyonu, yeni items dizisini önceki items dizisiyle karşılaştıracaktır. Hangi öğelerin eklendiğini, kaldırıldığını veya güncellendiğini belirleyecektir.
  2. Eklenen öğeler için yeni Fiber düğümleri oluşturulacak ve bu öğelerin DOM'a eklenmesi gerektiğini belirtmek için effectTag ayarlanacaktır.
  3. Kaldırılan öğeler için Fiber düğümleri silinmek üzere işaretlenecektir.
  4. Güncellenen öğeler için Fiber düğümleri yeni verilerle güncellenecektir.
  5. İşleme Aşaması: Ardından commit aşaması bu değişiklikleri gerçek DOM'a uygulayacaktır. Eklenen öğeler eklenecek, kaldırılan öğeler silinecek ve güncellenen öğeler değiştirilecektir.

key prop'unun kullanılması, verimli mutabakat için çok önemlidir. key prop'u olmadan, React items dizisi değiştiğinde tüm listeyi yeniden oluşturmak zorunda kalacaktır. key prop'u ile React, hangi öğelerin eklendiğini, kaldırıldığını veya güncellendiğini hızlı bir şekilde belirleyebilir ve yalnızca bu öğeleri güncelleyebilir.

Örneğin, bir alışveriş sepetindeki öğelerin sırasının değiştiği bir senaryoyu hayal edin. Her öğenin benzersiz bir key'i (örneğin, ürün kimliği) varsa, React bunları tamamen yeniden oluşturmadan öğeleri DOM'da verimli bir şekilde yeniden sıralayabilir. Bu, özellikle büyük listeler için performansı önemli ölçüde artırır.

Zamanlama ve Önceliklendirme

Fiber'ın temel faydalarından biri, güncellemeleri zamanlama ve önceliklendirme yeteneğidir. React, önceliğine göre bir iş birimini ne zaman başlatacağına, duraklatacağına, devam ettireceğine veya vazgeçeceğine karar vermek için bir zamanlayıcı kullanır. Bu, React'ın kullanıcı etkileşimlerini önceliklendirmesine ve karmaşık güncellemeler sırasında bile kullanıcı arayüzünün yanıt vermesini sağlamasına olanak tanır.

React, farklı önceliklerle güncellemeleri zamanlamak için çeşitli API'ler sunar:

Örneğin, analitik izleme veya arka plan veri getirme gibi kullanıcı deneyimi için kritik olmayan güncellemeleri zamanlamak için ReactDOM.unstable_deferredUpdates kullanabilirsiniz.

ReactDOM.unstable_deferredUpdates(() => {
  // Kritik olmayan güncellemeleri buraya yapın
  updateAnalyticsData();
});

Fiber ile Hata İşleme

Fiber, mutabakat süreci sırasında geliştirilmiş hata işleme sağlar. İşleme sırasında bir hata oluştuğunda, React hatayı yakalayabilir ve tüm uygulamanın çökmesini önleyebilir. React, hataları kontrollü bir şekilde işlemek için hata sınırlarını kullanır.

Bir hata sınırı, alt bileşen ağacının herhangi bir yerindeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve çöken bileşen ağacı yerine bir yedek kullanıcı arayüzü görüntüleyen bir bileşendir. Hata sınırları, işleme sırasında, yaşam döngüsü yöntemlerinde ve kendilerinin altındaki tüm ağacın oluşturucularında hataları yakalar.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Durumu güncelleyin, böylece bir sonraki işleme yedek kullanıcı arayüzünü gösterecektir.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Hatayı bir hata raporlama hizmetine de günlüğe kaydedebilirsiniz
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Herhangi bir özel yedek kullanıcı arayüzünü işleyebilirsiniz
      return 
Bir şeyler ters gitti.
;
    }

    return this.props.children;
  }
}

Hata fırlatabilecek herhangi bir bileşeni sarmak için hata sınırlarını kullanabilirsiniz. Bu, bazı bileşenler başarısız olsa bile uygulamanızın kararlı kalmasını sağlar.

// Hata sınırlarını burada kullanın

Fiber'ı Hata Ayıklama

Fiber kullanan React uygulamalarını hata ayıklamak zor olabilir, ancak yardımcı olabilecek çeşitli araçlar ve teknikler vardır. React DevTools tarayıcı uzantısı, bileşen ağacını incelemek, performansı analiz etmek ve hataları ayıklamak için güçlü bir araç seti sağlar.

React Profiler, uygulamanızın performansını kaydetmenize ve darboğazları belirlemenize olanak tanır. Her bileşenin işlenmesinin ne kadar sürdüğünü görmek ve performans sorunlarına neden olan bileşenleri belirlemek için Profiler'ı kullanabilirsiniz.

React DevTools ayrıca, her bileşenin prop'larını, durumunu ve Fiber düğümünü incelemenize olanak tanıyan bir bileşen ağacı görünümü sağlar. Bu, bileşen ağacının nasıl yapılandırıldığını ve mutabakat sürecinin nasıl çalıştığını anlamak için yararlı olabilir.

Sonuç

React Fiber mimarisi, geleneksel mutabakat sürecine göre önemli bir gelişmeyi temsil eder. Mutabakat sürecini daha küçük, kesilebilir iş birimlerine ayırarak Fiber, React'ın uygulamaların yanıt verme yeteneğini ve algılanan performansını iyileştirmesini sağlar, özellikle karmaşık senaryolarda.

Fiber'ın arkasındaki temel kavramları, fiberler, iş döngüleri ve zamanlama gibi anlamak, yüksek performanslı React uygulamaları oluşturmak için esastır. Fiber'ın özelliklerinden yararlanarak, daha duyarlı, daha dayanıklı ve daha iyi bir kullanıcı deneyimi sağlayan kullanıcı arayüzleri oluşturabilirsiniz.

React gelişmeye devam ettikçe, Fiber mimarisinin temel bir parçası olmaya devam edecektir. Fiber'daki en son gelişmelerden haberdar kalarak, React uygulamalarınızın sağladığı performans avantajlarından tam olarak yararlandığından emin olabilirsiniz.

İşte bazı önemli çıkarımlar:

React Fiber'ı benimseyerek ve ilkelerini anlayarak, dünya çapındaki geliştiriciler, konumlarından veya projelerinin karmaşıklığından bağımsız olarak daha performanslı ve kullanıcı dostu web uygulamaları oluşturabilirler.