Animasyon Öncesi Ölçümler için useLayoutEffect

Bazen bir öğe, yerli yerine oturmadan önce ilk kez görüntülenirken gözle görülür biçimde sıçrar veya titrer. Bu genellikle tarayıcı öğeyi zaten ekrana çizdikten sonra ölçmeniz ya da yeniden konumlandırmanız nedeniyle olur.

Kullanıcı tek bir kare boyunca yanlış konumu görür, ardından ani bir düzeltmeyle karşılaşır; bu da arayüzün bozuk görünmesine yol açar.

useEffect, tarayıcı çizim yaptıktan sonra çalışır. Bu nedenle useEffect içinde bir ölçümü okuyup DOM'u güncellerseniz, değişikliğiniz uygulanmadan önce kullanıcı düzeltilmemiş kareyi zaten görmüştür.

Kullanıcıdan gizlenmesi gereken görsel konumlandırmalarda çizim sonrası zamanlama çok geç kalır.

useLayoutEffect, React DOM'u değiştirdikten hemen sonra ve tarayıcı çizim yapmadan önce eşzamanlı olarak çalışır. Orada yaptığınız her DOM okuma veya yazma, kullanıcı tek bir kare görmeden önce uygulanır.

Bu nedenle anında doğru görünmesi gereken ölçüm ve konumlandırmalar için doğru araçtır.

useLayoutEffect içinde, animasyon uygulamadan önce konumunu ve boyutunu yakalamak için bir öğenin yerleşimini ref.current.getBoundingClientRect() ile okuyabilirsiniz.

Bu işlem çizimden önce gerçekleştiği için başlangıç dönüşümünü ölçüp uygularken görünür bir titreme oluşmaz.

FLIP; İlk, Son, Tersine Çevirme ve Oynatma aşamalarının baş harflerinden oluşur. Öğenin İlk konumunu kaydedersiniz, Son konumuna geçmesini beklersiniz, ardından öğeyi görsel olarak İlk konumuna geri getiren bir dönüşüm uygulayarak Tersine Çevirirsiniz. Son olarak dönüşümü kaldırarak Oynatırsınız; böylece öğe Son konumuna doğru animasyonla ilerler.

Gerçek yerleşim anında sıçramış olsa bile bu yöntem, yerleşim değişikliklerini yalnızca performans açısından hafif olan transform ile canlandırmanızı sağlar.

Önemli okumalar useLayoutEffect içinde yapılır: değişiklikten önce İlk dikdörtgeni, değişiklikten sonra Son dikdörtgeni yakalayın ve ardından farkı hesaplayın. Bunu çizimden önce yapmak, ters dönüşümün herhangi bir şey gösterilmeden önce uygulanmasını garanti eder.

İki dikdörtgen arasındaki fark, tersine çevirmek için gereken tam öteleme ve ölçeklendirme değerlerini verir.

Tersine çeviren dönüşümü useLayoutEffect içinde eşzamanlı olarak ayarlayın, ardından öğenin doğal konumuna animasyonla ilerlemesi için sonraki karede bu dönüşümü kaldırın. Oynatma adımını genellikle requestAnimationFrame ile tetiklersiniz.

Ters dönüşüm çizimden önce uygulandığı için kullanıcı öğeyi işlenmemiş Son konumunda hiçbir zaman görmez.

Sunucuda DOM bulunmaz; bu nedenle React, useLayoutEffect'in sunucu tarafında işleme sırasında hiçbir şey yapmadığına dair bir uyarı kaydeder. Yerleşim etkileri yalnızca tarayıcıda anlamlıdır.

Bu uyarı, ölçülecek hiçbir şey olmayan bir ortamda etkinin çalışamayacağını belirtir.

Bir bileşenin sunucuda çalışması gerekiyorsa ölçümünüzü bir sonraki çizimden önce yapmak için useEffect ile birlikte requestAnimationFrame kullanın veya useLayoutEffect'i yalnızca tarayıcıda koşullu olarak kullanın.

Bu yöntem, kritik olmayan animasyonlar için çizim öncesine yakın bir zamanlama sağlarken uyarıyı önler.

Yükseklik animasyonu klasik bir örnektir: daraltılmış ve genişletilmiş yükseklikleri useLayoutEffect içinde ölçün, ardından geçişin düzgün olması için açık piksel değerleri arasında animasyon uygulayın.

auto yüksekliği canlandırılamadığı için gerçek yüksekliği önceden ölçmek, belirli bir sayısal değere geçiş yapmanızı sağlar.

Çoğu iş için varsayılan olarak useEffect'i kullanın. useLayoutEffect'i yalnızca yerleşimi okuduğunuz ve görünür bir titremeyi önlemek için çizimden önce DOM'u değiştirmeniz gerektiğinde kullanın.

Aşırı kullanımı performansı olumsuz etkileyebilir; çünkü tamamlanana kadar çizimi engeller.

Etki zamanlamasını anlayıp anlamadığınızı sınayın.

Titreme sorununun çizimden sonra ölçüm yapmaktan kaynaklandığını, useLayoutEffect'in çizimden önce çalıştığını ve FLIP tekniğinin yerleşim değişikliklerini performans açısından hafif dönüşümlerle nasıl canlandırdığını öğrendiniz.

Ayrıca SSR uyarısını ve useEffect ile requestAnimationFrame kullanan bir alternatifi gördünüz.