Görüntüleme Aşaması ve DOM'ye İşleme

React'in çalışma döngüsünün iki ana aşaması vardır: işleme aşaması ve uygulama aşaması. İşleme aşamasında React, bileşen işlevlerinizi çağırır ve kullanıcı arayüzünün sanal bir temsilini oluşturur. Uygulama aşamasında React, sanal temsildeki değişiklikleri gerçek DOM'a uygular.

React 18 Eşzamanlı Modunda işleme aşaması duraklatılabilir, kesintiye uğrayabilir veya yeniden başlatılabilir. React, herhangi bir şeyi uygulamadan önce bileşen işlevinizi birden çok kez çağırabilir. Bu nedenle bileşen işlevleri saf olmalıdır; görünür bir güncelleme için işlev birden fazla kez çalışabileceğinden yan etkilere sahip olamazlar.

İşleme aşamasının aksine uygulama aşaması her zaman senkrondur ve tamamlanana kadar sürer. React, DOM değişikliklerini uygularken kesintiye uğratılamaz. Bu, DOM'un hiçbir zaman kısmen güncellenmiş bir durumda kalmamasını sağlar. Kullanıcılar her uygulamadan sonra her zaman tamamen tutarlı bir kullanıcı arayüzü görür.

Uygulama aşamasının üç alt aşaması vardır: değişiklikten önce (sınıf bileşeninin getSnapshotBeforeUpdate yöntemi, değişikliklerden önce DOM değerlerini okumak için burada çalışır), değiştirme (React, DOM düğümlerini ekler, günceller ve kaldırır) ve yerleşim (özellikle useLayoutEffect ile sınıf bileşenlerinin componentDidMount/componentDidUpdate yöntemleri olmak üzere senkron etkiler burada çalışır).

useEffect pasif bir etkidir; yani uygulama aşamasında çalıştırılmaz. Uygulama aşaması tamamlandıktan ve tarayıcı ekranı çizdikten sonra React, pasif etkileri eşzamansız olarak planlar. Bu etkiler, tarayıcının güncellenmiş DOM'u ekrana çizme fırsatı bulmasından sonra çalışır.

Tarayıcı, useLayoutEffect etkisinin çalıştığı yerleşim aşaması ile useEffect etkisinin çalıştığı pasif etkiler aşaması arasında ekranı çizer. Temel zamanlama farkı şudur: useLayoutEffect çizimden önce, useEffect ise çizimden sonra çalışır. Görsel çıktıyı değiştiren etkiler için bu ayrım büyük önem taşır.

Bir useEffect DOM'u okuyup durumu güncellerse (örneğin bir öğeyi ölçüp boyut durumunu ayarlarsa), React yeniden işler ve yeniden uygulama yapar. Tarayıcı iki kez çizim yapar: önce ilk boyutla, sonra düzeltilmiş boyutla. Kullanıcılar düzeltme görünmeden önce yanlış boyutun kısa süreliğine görüntülendiğini görebilir.

React, dahili olarak her bileşen örneği için bir tane olmak üzere Fiber düğümlerinden oluşan bir ağaç oluşturur. Her Fiber, bileşenin durumunu, etkilerini ve çıktısını tutar. Oluşturma aşamasında React, üzerinde çalışılan yeni bir Fiber ağacı oluşturur. Uygulama aşamasında, üzerinde çalışılan ağaç geçerli ağaç olur ve eski ağaç yeniden kullanılır.

React, geliştirme sırasında yan etkileri yakalamaya yardımcı olmak için Katı Modda bileşen işlevlerini ve etkileri kasıtlı olarak iki kez çağırır. Hem useLayoutEffect hem de useEffect etkinleştirilir, temizlenir ve yeniden etkinleştirilir. Bu iki kez çağırma üretimde gerçekleşmez. Amaç, etkilerin düzgün biçimde temizlenmediği hataları ortaya çıkarmaktır.

Oluşturma aşaması kesintiye uğrayıp yeniden çalıştırılabildiği için bileşen işlevleri, yan etkiler olmadan aynı girdiler için aynı çıktıyı üretmelidir. İşlev gövdesindeki (etkilerde olmayan) değişiklikler, abonelikler ve API çağrıları Eşzamanlı Modda beklenenden daha fazla çalışarak hatalara yol açar.

DOM özelliklerini hiçbir zaman doğrudan bileşen işlevinin gövdesinde okumayın. DOM, sunucu tarafında oluşturma sırasında henüz mevcut olmayabilir veya yeniden oluşturmalarda güncelliğini yitirmiş olabilir. DOM'un güncel olduğu garanti edildiğinden, DOM'u her zaman useLayoutEffect içinde (ekrana çizim öncesi okumalar için) veya useEffect içinde (ekrana çizim sonrası okumalar için) okuyun.

React'in uygulama aşamasının hangi alt aşamasında useLayoutEffect çalışır?

React'in oluşturma aşaması Fiber ağacını oluşturur ve kesintiye uğrayabilir; uygulama aşaması DOM değişikliklerini uygular ve her zaman eşzamanlıdır. Uygulama aşaması üç alt aşamadan oluşur: değişiklik öncesi, değişiklik ve yerleşim. useLayoutEffect, ekrana çizimden önce yerleşim aşamasında çalışır. useEffect ise ekrana çizimden sonra pasif bir etki olarak çalışır.