React, bir devlet değişikliği meydana geldiğinde, eski ve yeni UI sürümlerini bilir. Ancak, binlerce bileşenden oluşan bir ağacı yeniden oluşturmak veya yeniden rendrelemek非常 yavaş olacaktır.
React, bir problème çözmek zorundadır: 'Değişebilecek her şeyin neler değiştiğini belirlemek'. Bu soruyu çözen algoritma, Reconciler olarak adlandırılır.
Problemin Tanımı: Her Şeyi Yeniden Rendere Etmek Çok Yavaştır
Bir uygulamada 500 bileşen olduğunu varsayalım. Bir kullanıcı, bir düğmeye tıklayarak bir sayacı değiştirir. React, her bileşeni yeniden çalıştırmak, yeni JSX oluşturmak ve eski DOM ile karşılaştırmak zorunda kalır - 500 kez - yalnızca bir div öğesinin metninin güncellenmesi gerektiğini belirlemek için.
Eski framework'ler böyle yapıyordu. Bu nedenle yavaştiler.
React'in bulduğu çözüm: 'Ağacın büyük部分ı değişmedi'. React, ağacın hangi kısımlarının değişebileceğini hızlı bir şekilde belirleyebilirse, diğerlerini atlayabilir ve yalnızca önemli kısımlarda gerçek iş yapabilir.
İlk Atlanma: İz Sürme
Bir bileşende setState çağrısı yaptığınızda, React yalnızca bu bileşeni güncelleme için işaretlemez. İz bırakır - bu bileşenden ağacın köküne kadar ebeveynlerine bir iz bırakır.
Her ebeveyn, bir bayrak alır: 'çocuklarından biri güncellenmesi gerekiyor'.
Sonra React, ağacı gezerek yeniden rendrelenmesi gerekenleri bulurken, bu bayrakları kullanır. Her düğümde sorar: 'Bu düğüm güncellenmesi gerekiyor mu? Hayır mı? Çocukları güncellenmesi gerekiyor mu? Hayır mı?' Eğer her iki cevap da hayır ise, React bu alt ağacı tamamen atlar - yalnızca düğümü değil, içindeki tüm bileşenleri.
İkinci Atlanma: Özellikler Değişmedi
React, güncellenmesi gereken bileşene ulaştı. Ancak önce, bu bileşenin girdileri (özellikleri) değişip değişmediğini kontrol eder.
Eğer bir ebeveyn yeniden rendrelenirse, çocukları için yeni özellikler oluşturabilir. Ancak 'yeni' her zaman 'farklı' anlamına gelmez. React, eski özelliklerle yeni özellikleri karşılaştırır. Eğer aynı nesne referansına sahipse - aynı bellek işaretçisi - React, bu bileşeni tamamen atlar.
Sonuç
React, devlet değişikliklerinde neler değiştiğini belirlemek için özel bir algoritma kullanır. Bu algoritma, Reconciler olarak adlandırılır ve React'in performansı için çok önemlidir. React, ağacın hangi kısımlarının değişebileceğini hızlı bir şekilde belirleyebilirse, diğerlerini atlayabilir ve yalnızca önemli kısımlarda gerçek iş yapabilir.
Yapay zeka özeti
React, devlet değişikliklerinde neler değiştiğini belirlemek için özel bir algoritma kullanır. Bu algoritma, Reconciler olarak adlandırılır ve React'in performansı için çok önemlidir.
