Bazen uygulamalarımızı React’te oluşturduğumuzda, uygulamamızı geliştirme fırsatlarını kolayca kaçırabiliriz ve bunun nedeni muhtemelen uygulamamız İşler ve hissediyor hızlı, mükemmel olduğu için tolere ederiz. Geliştiriciler olarak, projelerimizin sonucu bize normal görünüyorsa, kullanıcılara normal görüneceğini varsayabiliriz. Zihnimiz böyle düşündüğünde, bu Mayıs kodumuzda daha iyi bir sonuç için optimize edilebilecek alanları gözden kaçırmamıza neden olur.
Bu makale, React Uygulamalarınızı Güçlendirmek için 8 Mucizevi Yoldan bahsedecek.
1. Kimliklerinizi Sevin
Tepki uygulamalarınızı güçlendirmenin ilk yolu, kimliklerinizi sevmektir.
Değişkenleri ve işlevleri şu şekilde sarabileceğinizi hatırlamak önemlidir. React.useMemo çünkü onlara kendilerini not etme yeteneği verebilirsiniz, böylece tepki, gelecekteki renderler için aynı kaldıklarını bilir.
Aksi takdirde, bunları not almazsanız, referansları gelecekteki işlemelerden kaybolacaktır. Bu onların duygularını incitebilir, böylece onları sevdiğinizi ve onları not alarak saklamak istediğinizi gösterebilirsiniz. Onları seviyorsanız, içinde bulundukları durumlar için gereksiz işlemlerden kaçınmaya yardımcı olarak sizinle ve uygulamanızla ilgilendiklerinden emin olarak sizi tekrar seveceklerdir.
Örneğin, bir listeyi alan özel bir kanca yaptığımızı varsayalım. urls onları çözülecek bir dizi vaatte biriktirebilmesi için argümanlar olarak Promise.all. Sonuçlar duruma eklenecek ve App bileşen biter bitmez. Söz listemiz, urls getirilecek 4 farklı url içeren dizi:
Görevimiz bu 4 bağlantıdan veri almaktı, bu nedenle ideal olarak yalnızca 4 istek gönderilmelidir. Ama eğer bir göz atarsak ağ sekmesi içeri Krom, gerçek şu ki 8 istek gönderdi. Bunun nedeni, urls argüman yapar olumsuzluk öncekiyle aynı kimliği koru çünkü ne zaman App yeniden oluşturur, her seferinde yeni bir dizi başlatır – bu nedenle React onu değiştirilmiş bir değer olarak değerlendirir.
Bilgisayar programları bazen bizi alt edebileceklerini ve bu berbat davranıştan kurtulabileceklerini düşünüyorlar. Bunu düzeltmek için kullanabiliriz React.useMemo böylece sözler dizisi her işlemede kendini yeniden hesaplamaz URL’leri içeren dizi değişmediği sürece.
Bu konsepti uygulamak için kodumuzu yeniden düzenleyelim:
Bunu şimdi çalıştırırsak, hala 8 istek gönderiyor olacak. Bunun nedeni, not almamıza rağmen urls dizi, ayrıca not almamız gerekiyor promises kancamızdaki değişkenler çünkü bu da kendini somutlaştırıyor kanca çalıştığında:
Kodumuz, çalıştırdığımızda artık yalnızca 4 istek göndermelidir. Yaşasın!
2. Sahne Eşyalarını Çocuklarla Birleştirin
Bazen, render işlemine geçmeden önce çocuklarla birleştirmek için bir pervaneye gizlice girmek istediğimiz bir duruma düşebiliriz. React, herhangi bir tepki öğesinin yanı sıra diğer öğelerin özelliklerini görüntülemenizi sağlar; örneğin, key.
Children öğesini yeni bir bileşenle sarabilir ve oradan yeni props’ları enjekte edebiliriz veya bu yöntemi kullanarak yeni props’ları birleştirebiliriz.
Örneğin, diyelim ki bir App kullanan bileşen useModal gibi kontroller sağlayarak modları yönetmek için bazı kullanışlı yardımcı programlar sağlayan kanca open, closeve opened. Bu sahne öğelerini bir VisibilityControl bileşen, çünkü kalıcı verileri çocuklara aktarmadan önce ek işlevsellik sağlayacak:
VisibilityControl emin olur activated dır-dir true izin vermeden önce opened normal olarak çocukları tarafından kullanılacaktır. Bu gizli bir rotada kullanıldıysa, VisibilityControl etkinleştirilmemiş kullanıcıların gizli içeriği görmesini engelleme işlevi sağlar.
3. Devasa Bir Redüktör için Redüktörleri Birleştirin
Daha büyük bir tane yapmak için uygulamada iki veya daha fazla redüktörü birleştirmeniz gereken bir zaman gelebilir. Bu yaklaşım şuna benzer combineReducers tepki-redux’da çalıştı
Diyelim ki, başlangıçta uygulamadaki her bir parçayı kendi bağlamlarından/durumlarından sorumlu olacak şekilde atamayı planladığımız dev bir mikro hizmet uygulaması yapmayı planladık, ancak sonra sadece devletlerin bunu gerektiren bir milyon dolarlık bir uygulama fikri düşündük. bunun yerine hepsini aynı ortamda yönetebilmemiz için tek bir büyük devlette birleşelim.
Elimizde bir authReducer.js, ownersReducer.jsve frogsReducer.js birleştirmek istediğimiz:
authReducer.js
sahipleriReducer.js
kurbağalarReducer.js
Bunları ana dosyamıza aktaracağız ve orada durum yapısını tanımlayacağız:
App.js
Daha sonra, normalde arama ile yaptığınız gibi, sadece kancalarla çalışırsınız. dispatcheşleştirmede geçen type ve belirtilen redüktörün argümanları.
Bakılması gereken en önemli kısım, rootReducer:
4. Hata Raporları için Nöbetçi
Projelerden büyük fayda Nöbetçi React ile entegre edildiğinde. Hataların ayrıntılı raporlarının tümünün tek seferde analiz edilmek üzere merkezi bir konuma gönderilmesi bir çok önemli sahip olmak için bir araç!
bir kez sen npm install @sentry/browser ve tepki uygulamanız için ayarladıysanız, oturum açabilirsiniz. nöbetçi.io hesabınızı oluşturduktan ve projenizin kontrol panelindeki hata raporlarınızı analiz ettikten sonra.
Bu raporlar gerçekten ayrıntılıdır, bu nedenle kullanıcının cihazını, tarayıcısını, hatanın oluştuğu URL’yi, kullanıcının IP adresini, yığını bilmek gibi bu hataları çözmenize yardımcı olacak tonlarca bilgi ile beslenerek bir FBI ajanı gibi hissetmenin avantajlarından yararlanacaksınız. hatanın izi, hata işlendi mi, işlenmedi mi, işlev isimkaynak kodu, hataya yol açan ağ eylemlerinin izini, üstbilgileri ve daha fazlasını gösteren yararlı bir içerik haritaları listesi.
İşte bunun nasıl görünebileceğinin bir ekran görüntüsü:
Ayrıca, ortak bir ortam olabilmesi için birkaç ekip üyenizin farklı şeyler hakkında yorum yapmasını sağlayabilirsiniz.
5. Aksiyoları kullanın window.fetch
Internet Explorer kullanıcılarını umursamıyorsanız, olumsuzluk kullanmak window.fetch tepki uygulamalarınız için çünkü Yok IE tarayıcı desteği window.fetch bir çoklu dolgu sağlamadığınız sürece. Axios, IE’yi desteklemek için harikadır, ancak uçuş sırasında istekleri iptal etmek gibi masaya getirdiği ek işlevsellik için de iyidir. Bu window.fetch aslında herhangi bir web uygulaması için geçerlidir ve React’e özgü değildir. Bu listede olmasının nedeni, bunun nadir olmamasıdır. window.fetch günümüzde React uygulamalarında kullanılmaktadır. Reaksiyon uygulamaları, yapılandırılan araçlara bağlı olarak aktarma/derleme aşamalarından geçtiğinden, yanlışlıkla aktarıldığını varsaymak oldukça cazip olabilir. window.fetch.
6. DOM Düğümlerini İzlerken Nesne Referansları Üzerinden Geri Arama Referanslarını Kullanın
Rağmen React.useRef bir DOM düğümüne referansları eklemek ve kontrol etmek için bloktaki yeni çocuktur, her zaman en iyi seçenek değildir.
Bazen ek işlevsellik sağlayabilmeniz için bir DOM düğümünde daha fazla denetime ihtiyacınız olabilir.
Örneğin, tepki belgeleri geçerli ref değerinde değişiklikler olsa bile, dışarıdaki bir bileşenin güncellemelerden haberdar edilebilmesini sağlamak için bir geri arama ref kullanmanız gerekeceği bir durumu gösterin. Bu, geri arama referanslarının avantajıdır. useRef.
Material-ui bu güçlü konsepti kullanır bileşen modülleri boyunca ek işlevsellik eklemek için. Bununla ilgili en büyük kısım, temizlemenin bu davranıştan doğal olarak ortaya çıkmasıdır. Müthiş!
7. useWhyDidYouUpdate
Bu, bileşenlerimizi yeniden oluşturan değişiklikleri ortaya çıkarmak için özel bir kancadır. Bazen, yüksek dereceli bileşen gibi bir memoizer React.memo yeterli değil, bunun yerine hangi sahne malzemelerini not almayı düşünmeniz gerektiğini bulmak için bu kullanışlı kancayı kullanabilirsiniz: (Kredi Bruno Limonu)
O zaman şöyle kullanırsın:
8. İşlevlerinizin Sizi Bulmasını Sağlayın
bu benden alıntı olacak önceki makale çünkü biraz uzun ve bu yazıya çok uyuyor. İşte içerik:
Bunu biraz daha vurgulamak istediğim için gerçek hayattan bir örnek vereyim.
Üst düzey fonksiyonların en büyük faydalarından biri, doğru kullanıldığında tasarruf sağlamasıdır. çok fazla için zamanın sen ve için çevrendekiler.
Benim işimde kullandık tepki vermek Bildirimleri görüntülemek için biz onu kullandık her yerde. Ayrıca, hızlı son dakika UX kararları için harika kaçış kapakları da yaparlar: “Bu hatayı nasıl ele almalıyız? Sadece bir kadeh kaldırma bildirimi göster!” Tamamlandı.
Ancak, uygulama büyüdükçe ve karmaşıklık seviyesi üzerimize çöktüğünde, bildirimlerimizin çok sık olmaya başladığını fark etmeye başladık. Bu iyi, ancak yinelemeleri önlemenin bir yolu yoktu. Bu, bazı tost bildirimlerinin, açık olduklarında bile ekranda birden çok kez göründüğü anlamına geliyordu. tam olarak aynı üstündeki tost gibi.
Böylece, aktif tost bildirimlerinin kaldırılmasına yardımcı olmak için kitaplığın sağladığı API’den yararlandık. İD kullanarak tost.dismiss().
Önümüzdeki kısımları açıklamak için, devam etmeden önce tostları içe aktardığımız dosyayı göstermek iyi bir fikir olabilir:
Şimdi sabırlı ol, bunun çekici görünmeyebileceğini biliyorum. Ama söz veriyorum iki dakika içinde daha iyi olacak.
Ekranda daha önce bir tost olup olmadığını kontrol etmek için ayrı bir bileşende sahip olduğumuz şey buydu. Ve varsa, o tostu kaldırmaya ve yeni tostu yeniden görüntülemeye çalışacaktır.
Bu iyi çalışıyordu – ancak, uygulama boyunca aynı şekilde değiştirilmesi gereken başka tostlarımız vardı. Yinelenenleri kaldırmak için bir tost bildirimi görüntüleyen her dosyayı gözden geçirmemiz gerekiyordu.
düşündüğümüzde her dosyadan geçiyor 2019’da bunun çözüm olmadığını hemen anladık. Yani biz baktık util/toast.js dosya ve bunun yerine sorunumuzu çözmek için yeniden düzenledi. İşte daha sonra nasıl göründüğü:
src/util/toast.js
Her dosyayı gözden geçirmek yerine, en basit çözüm bir dosya oluşturmaktı. üst düzey fonksiyon. Bunu yapmak, rolleri “tersine çevirmemize” izin verdi, böylece dosyalar arasında arama yapmak yerine, tostlar üst düzey fonksiyonumuza yönelik.
Bu şekilde dosyalardaki kodlar olumsuzluk değiştirilmiş veya dokundu. Hala normal çalışıyorlar ve sonunda gereksiz kod yazmak için hiçbir yere gitmeden yinelenen tostları kaldırma yeteneği kazandık. Bu zaman tasarrufu.
Çözüm
Ve bu, bu makalenin sonunu tamamlıyor! Umarım faydalı bulmuşsunuzdur ve gelecekte daha fazlasını bekleyin!
