Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Bir mobil uygulamayı kullanmak, herhangi bir sinir bozucu gecikme olmaksızın keyifli bir deneyim olmalıdır. Bir React Native geliştiricisi olarak, uygulamalarınızı iyi çalışacak ve kullanımları kolay olacak şekilde optimize etmeniz çok önemlidir. En yüksek uygulama performansı, doğru araçları ve kitaplıkları kullanarak temiz ve verimli kod yazmanızı gerektirir.

React Native uygulamanızın performansını optimize etmek için bu ipuçlarına ve tekniklere göz atın.

1. UseMemo Hook ile Gereksiz Yeniden İşlemeleri Azaltın

React Native, bileşenleri bir Sanal DOM (VDOM) teknolojisi kullanarak işler. VDOM, uygulama bileşenindeki tüm değişiklikleri takip eder ve gerekli gördüğünde tüm görünüm hiyerarşisini yeniden işler. Bu işlem pahalıdır, bu nedenle bileşenin durumu ve donanımı için gereksiz güncellemelerden kaçınmalısınız.

instagram viewer

React kitaplığı şunları sağlar: notu kullan Ve geri arama kullan fonksiyonel bileşenlerde bu sorunu çözmek için kancalar. useMemo kancasını şu amaçlarla kullanabilirsiniz: bir JavaScript işlevinin sonuç değerini ezberle her işlemede yeniden hesaplamak istemediğinizi.

İşte nasıl kullanabileceğinize dair bir örnek notu kullan kanca:

içe aktarmak {kullanım Notu } itibaren'tepki';
işlevBileşenim({ veri }) {
// computeExpensiveValue işlevi pahalı bir hesaplamadır.
// her işlemede yeniden hesaplanması gerekmez.
sabit pahalıDeğer = kullanımMemo(() => computeExpensiveValue (veri), [veri]);
// Bileşen, yeniden hesaplama yapmadan hafızaya alınan değeri kullanabilir 
// her renderda.
geri dönmek
{pahalıDeğeri}/div>;
}

Sarma hesaplamaPahalıDeğer içindeki işlev notu kullan kanca işlevin sonucunu ezberler. bu notu kullan hook, ikinci bir argümanı bağımlılık olarak kabul edebilir. Bu, belleğe alınan işlevin yalnızca bu bağımlılık değiştiğinde kazancı çalıştıracağı anlamına gelir.

geri arama kullan benzer notu kullan, ancak bir değer yerine bir geri arama işlevini ezberler. Bu, bir donanım olarak aktarılan bir geri arama işlevi tarafından tetiklenen alt bileşenlerin gereksiz yere yeniden oluşturulmasını önlemek için yararlı olabilir.

2. Etkin Durum Veri İşleme

Zayıf durum yönetimi, veri tutarsızlıklarına yol açarak izini sürmesi ve düzeltmesi zor olabilecek beklenmeyen davranışlara yol açabilir. İyi durum yönetimi, uygulamayı yavaşlatabilecek ve hata ayıklamayı zorlaştırabilecek durumda gereksiz verilerin depolanmasından kaçınmayı içerir. Bileşenin işlenmesi için sakladığınız tüm durumların kesinlikle gerekli olduğundan emin olmanız önemlidir.

Durumu etkili bir şekilde güncellemenin başka bir yolu, yayılma operatörü veya yayılma operatörü gibi değişmezlik tekniklerini kullanmaktır. Object.ata () yöntem.

Örneğin:

içe aktarmak Tepki, { useState } itibaren'tepki';
işlevBileşenim() {
sabit [durum, setState] = useState({
 saymak: 0,
 metin: 'Merhaba'
 });


işlevkoluTıklayın() {
 setState(öncekiDevlet => {
geri dönmekNesne.ata({}, öncekiDurum, { sayım: öncekiDurum.count + 1 });
 });
 }
geri dönmek (

Bu örnekte, koluTıklayın işlevi kullanır setState durumu güncellemek için kanca. Yine de, durum nesnesini doğrudan değiştirmek yerine, Object.ata () count özelliği değiştirilerek önceki durumu kopyalayan yeni bir nesne oluşturma yöntemi. Bu yaklaşım, React'in sanal DOM'sinin, durumu güncellediğinizi algıladığında bileşeni yeniden oluşturmasına olanak tanır.

Redux gibi bir durum yönetimi kitaplığı da kullanabilirsiniz ve yerleşik bağlam API'sı Bu tekniği uygulamak için.

3. Bir Performans İzleme Sistemi Uygulayın

Mobil uygulama performans izleme sistemleri (PMS), mobil uygulamalarınızın performansını ölçmenizi ve analiz etmenizi sağlayan araçlardır. Gerçek zamanlı izleme, kilitlenme raporlaması, ağ izleme, performans ölçümleri ve kullanıcı oturumunu tekrar oynatma gibi özellikler sağlarlar. React Native uygulamanızla bir performans izleme sistemi kullanmak, uygulamanızı düzeltmek ve ölçeklendirmek için performans darboğazlarını belirlemenize olanak tanır.

Burada mevcut çeşitli PMC araçlarının bir listesi bulunmaktadır.

  • React Native Debugger: React Native uygulamanızın durumunu denetlemenizi ve hata ayıklamanızı sağlayan bağımsız bir uygulama. Ayrıca, performans sorunlarını belirlemenize ve düzeltmenize yardımcı olacak bir performans izleyicisi içerir.
  • React Native Profiler: Bu yerleşik performans izleme aracı, her bileşenin işlenmesi için geçen süreyi ölçerek uygulamanızın performansını izlemenizi sağlar.
  • Flipper: Performans sorunlarını belirlemenize ve düzeltmenize yardımcı olabilecek bir performans izleyiciye sahip bir mobil uygulama geliştirme platformu.
  • Firebase Performance Monitoring: Firebase tarafından sağlanan ve uygulamanızın farklı cihaz ve platformlardaki performansını izlemenizi sağlayan bir performans izleme aracı.

4. Console.log İfadelerini Kaldırma

Bir console.log deyimi çalıştığında, mesajı konsola kaydetmesi için JavaScript motoruna bir mesaj gönderir. JS motorunun mesajı işlemesi ve göstermesi zaman alır.

Kodunuzda çok fazla konsol ifadesi yürütmeyi yavaşlatacak ve performans gecikmelerine neden olacaktır. Bu, uygulamanız düşük kaliteli bir mobil cihaz gibi sınırlı kaynaklara sahip bir cihazda çalıştığında özellikle sorunlu olabilir.

5. Verimli Bir Navigasyon Sistemi Oluşturun

İyi bir navigasyon sistemi, React Native uygulamanızın genel yapısını iyileştirerek, bakım yapmayı, özellikleri güncellemeyi ve durum verilerini verimli bir şekilde aktarmayı kolaylaştıracaktır. Ek olarak, uygulamanızda birden çok ekran arasında geçiş yapmayı çok daha kolay hale getirerek kullanıcı deneyimini geliştirir.

Uygulamanıza uyması için doğru gezinme düzeni (sekme tabanlı, yığın tabanlı, çekmece tabanlı vb.) gibi faktörleri göz önünde bulundurmalısınız. Uygulamanızda beklediğiniz ekran sayısını ve bunlar arasında durum verilerini nasıl aktaracağınızı hesaba katın.

Önbelleğe alma, güvenilir bir navigasyon sistemi geliştirmek için yararlı bir yöntemdir. Önbelleğe alma, kullanıcı ayrıldığında bir ekranın veya bileşenin durumunu kaydetmenize ve ardından geri döndüklerinde onu geri yüklemenize olanak tanır. Bu, yüklemeniz gereken veri miktarını ve yeniden oluşturmanız gereken sayıyı en aza indirmeye yardımcı olur.

React Native, React Navigation ve React Native Navigation gibi gezinme için çeşitli kitaplıklara sahiptir. Uygulamanızda bu yaygın gezinme modellerinden bazılarını uygulamak için bunları kullanabilirsiniz.

6. Kod Bölme ve Geç Yükleme ile Uygulama Boyutunu Küçültün

Uygulama boyutu, kullanıcı deneyiminin ilk yükleme süresi, bellek kullanımı ve depolama alanı gibi özelliklerini etkileyebileceğinden optimize edilmiş performans için önemlidir.

Kod bölme ve yavaş yükleme, React Native uygulamanızın boyutunu azaltabilecek ve performansı artırabilecek tekniklerdir.

Kod bölme, büyük bir JavaScript kod tabanını daha küçük, daha yönetilebilir "paketlere" ayırma işlemidir. Bu, uygulamanın ilk yükleme süresini önemli ölçüde azaltabilir.

Tembel yükleme, bileşenleri başlangıçta değil, kullanıcı onlara doğru giderken yüklemenizi sağlayan bir tekniktir. Bu, uygulamanızın kullandığı bellek miktarını azaltmaya ve genel performansı iyileştirmeye yardımcı olabilir.

Performans Optimizasyonu Neden Önemlidir?

Performans optimizasyonu, herhangi bir mobil uygulamanın başarısı için çok önemlidir. Yavaş bir uygulama, zayıf kullanıcı deneyimine yol açabilir ve sonuç olarak düşük katılım ve elde tutma ile sonuçlanabilir.

Bu püf noktaları, uygulamanızın kullanıcı tabanına keyifli bir deneyim sağlamak için kullanabileceğiniz yollardan yalnızca birkaçıdır.