En İyi Uygulamaları ve Faydalı İşlevleri Tepkime

Son zamanlarda React, geliştiricilerin tek sayfalık bir uygulamadan mobil uygulamalara kadar her şeyi oluşturmak için kullandıkları yeni bir araç haline geldi. Fakat React'in daha derinliklerine girmeye başladığımdan beri, son derece kötü bir şekilde geliştirilen tüm bu “harika” düğüm modüllerini gördüm. Kurallara uymuyorlar, bileşenler çok büyük. Devleti hemen hemen her şey için kullanıyorlar ve dilsiz bileşenlerden yararlanmıyorlar. Yeterli tecrübeye sahip olan herkes, bunun ne kadar güçlük çektiğini ve her bileşeni her seferinde oluşturursanız tarayıcıya ne kadar yük getirdiğini anlar. Bu makalede, hem React'in nasıl kurulacağı hem de son derece hızlı şekilde nasıl yapılacağı konusunda en iyi React uygulamalarını inceleyeceğim.

Lütfen, yeni uygulamalar çıktıkça bu makaleyi güncellemeye devam edeceğimi unutmayın.

Okumaya başlamadan önce, lütfen Dikkat: işlevsel bir programlama (FP) kütüphanesidir. FP'nin ne olduğunu bilmiyorsanız, lütfen bu Stack Exchange cevabını okuyun.

ES6 kullanın (Babil ile transpillendi)

ES6 hayatınızı çok kolaylaştıracak. JS'nin daha modern görünmesini ve hissetmesini sağlar. ES6 ile harika bir örnek, Jeneratörler ve Sözler. Zaman uyumsuz bir arama yapabilmek için bir sürü iç içe arama yapmanız gerektiğine dikkat edin. Şimdi ben de sizi karşıladığı için mutluyum, Senkron Asenkron JS, (evet, göründüğü kadar havalı). Buna güzel bir örnek, jeneratörlerdir:

Bu nerde:

Buna dönüşür:

Web paketini kullan

Webpack'i kullanma kararı basittir: Sıcak yükleme, küçültülmüş dosyalar, düğüm modülleri :) ve uygulamalarınızı küçük parçalara bölebilir ve bunları tembel olarak yükleyebilirsiniz.

Büyük ölçekli bir uygulama yapmayı planlıyorsanız, tembel yüklemenin nasıl çalıştığını anlamak için bu makaleyi okumanızı tavsiye ederim.

JSX kullan

Bir web geliştirme geçmişinden geliyorsanız JSX çok doğal hissedecektir. Ancak geçmişiniz web'de değilse, çok fazla endişe duymazsanız, JSX'in öğrenmesi çok kolaydır. JSX'i kullanmazsanız, uygulamanın bakımının daha zor olacağını unutmayın.

Her zaman paketinizin boyutuna bakın

Paketinizi küçültmenin bir ipucu, doğrudan düğüm modülü kök yolundan almaktır.

Bunu yap:

Foo’yu ‘foo / Foo’dan içe aktar

onun yerine:

{Foo} 'yu "foo" dan içe aktarın

Bileşenlerinizi küçük tutun (Çok Küçük)

Temel kural şudur: render yönteminizde 10'dan fazla satır varsa, muhtemelen çok büyüktür. React'i kullanma fikri kodun tekrar kullanılabilirliğidir, bu nedenle her şeyi tek bir dosyaya attığınızda React'in güzelliğini kaybedersiniz.

Kendi bileşenine sahip olmak için neye ihtiyaç var?

React'i düşünürken, kodun tekrar kullanılabilirliğini ve kod yapısını düşünmeniz gerekir. Sadece bir satır kod içeren basit bir giriş elemanı için bir bileşen oluşturmazsınız. Bileşen, kullanıcının bir olarak algıladığı “HTML” öğelerinin bir karışımıdır. Bunun biraz garip geldiğini biliyorum ama bir örnek görelim. Bu giriş ekranına bir göz atın:

Arkasındaki yapı nedir. İki giriş içeren bir düğme ve bir link var. Bunu kodda görelim:

Burada yanlış olan ne? Tekrarlama. Girişler aynı yapıyı içerir, neden bunu bir bileşen yapmıyorsunuz?

Şimdi bu çok güzel. Burada fazla ayrıntıya girmeyeceğim, ancak okumaya devam etmek istiyorsanız, Düşünme Tepkilerine gidin.

Devletten ne haber?

React'te en iyi uygulama, durumunuzu en aza indirmektir. Akılda tutulması gereken bir şey, bir çocuk ve ebeveyn arasında durumu senkronize etmekten kaçınmaktır. Yukarıdaki örnekte, durum görünümden bir sahne olarak geçirilir ve kullanıcı şifreyi ve kullanıcı adını her güncellediğinde, durum görünümde formda değil görünümde güncellenir.

Performans optimizasyonu için ShouldComponentUpdate kullanın

Tepki, HER ZAMAN, bileşenlerin durumunu veya değişimlerini takip eden bir şablon dilidir. Öyleyse, bir eylemde her seferinde tüm sayfayı oluşturmak zorunda kaldığınızı hayal edin. Bu tarayıcıda büyük bir yük alır. ShouldComponentUpdate'in girdiği yer, React ne zaman görüntüleniyorsa, ComponentUpdate'in false / true değerini döndürüp döndürmediğini görmek için kontrol eder. Bu yüzden ne zaman statik olan bir bileşeniniz varsa, kendinize bir iyilik yapın ve yanlış döndürün. Ya da statik değilse, sahne / durumun değişip değişmediğini görmek için kontrol edin.

Performans optimizasyonu hakkında daha fazla bilgi edinmek istiyorsanız, React Perf hakkındaki makalemi okuyun.

Değişmezliği düşünün

Scala veya diğer yüksek performanslı dillerden geliyorsanız, değişmezlik muhtemelen gerçekten aşina olduğunuz bir kavramdır. Fakat eğer kavram aşina değilseniz ikizleriniz gibi değişmezliği düşünün. Çok birbirlerine benziyorlar ve aynı görünüyorlar, ancak eşit değiller. Örneğin:

Az önce ne oldu? Nesne2, nesne1'in referansı olarak, nesne2'nin her anlamındaki, nesne1'e başvurmanın başka bir yolu olduğu anlamına gelir. Object3'ü yarattığımda, object1 ile aynı yapıya sahip yeni bir nesne oluşturdum. Object.assign işlevi yeni bir nesneyi alır ve nesne1'in yapısını klonlar; böylece nesne1'i nesne3 ile karşılaştırdığınızda farklı olurlar. Bu neden önemlidir? Performans optimizasyonunu düşünün, yukarıda belirtilen React'in bileşen durumu her değiştiğinde ortaya çıktığını söyledim. ShouldComponentUpdate işlevini kullanırken, tüm özelliklerin farklı olup olmadığını görmek için derin bir kontrol yapmak yerine, nesneleri kolayca karşılaştırabilirsiniz. Daha fazla bilgi edinmek istiyorsanız bu makaleyi okumaya devam edin.

Akıllı ve Salak Bileşenleri Kullan

Burada, her nesnede bir devlet olması gerekmediğinden başka söylenecek bir şey yok. İdeal olarak, akıllı bir ebeveyn görüşüne sahip olacaksınız ve tüm çocuklar, yalnızca destek alan ve içinde herhangi bir mantık bulunmayan aptal bileşenlerdir. Böyle bir şey yaparak aptal bir bileşen oluşturabilirsiniz:

Dumb bileşenlerinin hata ayıklaması da kolaydır çünkü React'in tamamen hakkında olduğu yukarıdan aşağıya metodolojisini uygular.

PropTypes kullanın

PropTypes, bileşenler için veri doğrulamasını ayarlamanıza yardımcı olur. Bu hata ayıklama sırasında ve birden fazla geliştiriciyle çalışırken çok kullanışlıdır. Büyük bir ekiple çalışan herkes bu makaleyi okumalıdır.

Yapıcı yöntemindeki işlevleri her zaman bağlayın

Durum kullanan bileşenlerle çalışırken, yapıcı yöntemindeki bileşenleri bağlamaya çalışın. Şimdi ES7'yi kullanabileceğinizi ve şimdi böyle bir şey kullanarak işlevleri bağlayabileceğinizi unutmayın (Yapıcıda ciltleme yerine):

someFunction = () => {
}

Redux / Flux kullanın

Verilerle uğraşırken Flux veya Redux kullanmak istersiniz. Flux / Redux, verileri kolayca kullanmanıza olanak tanır ve acıyı ön uç önbelleği kullanmaktan uzaklaştırır. Şahsen Redux kullanıyorum çünkü sizi daha kontrollü bir dosya yapısına zorluyor.

Redux / Flux'u kullanmanın bazen çok yararlı olduğunu aklınızda bulundurun, ancak uygulamanızın bütün durumunu tek bir düz nesnede tutmanız gerekmeyebilir. Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz.

Normalizr kullan

Şimdi verilerden bahsediyoruz, biraz zaman alacağım ve size karmaşık veri yapılarıyla uğraşmanın kutsal kâsesini tanıtacağım. Normalizr, iç içe geçmiş json nesnelerinizi anında değiştirebileceğiniz basit yapılar olarak yapılandırır.

Dosya yapısı

Burada açık bir şekilde ifade edeceğim ve sadece React / Redux ile birlikte çalışmayı kolaylaştıran 2 dosya yapısı gördüğümü söyleyeceğim.

İlk yapı:

İkinci yapı:

Kapları Kullan (Çekilmiş - 2017 Güncellemesi Sonraki Bölüm)

Verileri ileten kapları kullanmak istemenizin nedeni, Flux / Redux ile çalışırken her görünümü bir mağazaya bağlamaktan kaçınmak istediğinizdir. Bunu yapmanın en iyi yolu iki kap oluşturmaktır. Biri tüm güvenli görünümleri (kimlik doğrulama gerektiren görünümler) ve diğeri de tüm güvensiz görünümleri içeren. Bir ebeveyn kabı oluşturmanın en iyi yolu çocukları klonlamak ve istenen malzemeleri aşağıya indirmektir.

Örnek:

Kapsayıcılar yerine Şablonlar Kullan

Konteynırlarla çalışırken ve görünümleri aşağı çekmek için sahne malzemelerini klonlarken, bunu yapmanın daha etkili bir yolunu buldum. Bunu şimdi önerdiğim yol konteyner kullanmak yerine, AuthenticatedTemplate ve NotAuthenticatedBaseTemplate tarafından genişletilen bir BaseTemplate oluşturmaktır. İki şablonda, tüm işlevleri ve kimliği doğrulanmamış / kimliği doğrulanmamış görünümler arasında paylaşılan durumu ekleyeceksiniz. React.Component’i uzatmak yerine, görünümlerde şablonu genişletirsiniz. Bu şekilde, herhangi bir nesneyi klonlamaktan kaçınır ve bileşen ağacını aşağı gönderen sahne malzemelerini filtreleyebilirsiniz.

Referanslardan Kaçının

Referanslar sadece kodunuzu korumayı zorlaştırır. Artıları kullanırken, doğrudan sanal Dom'u değiştiriyorsunuz. Bu, bileşenin tüm Dom ağacını yeniden oluşturması gerektiği anlamına gelir.

Prop doğrulama kullan

PropTypes, büyük bir ekiple çalışırken hayatınızı çok daha iyi hale getirir. Bileşenlerinizi görünüşte hata ayıklamanıza izin verir. Ayrıca hata ayıklama işleminizi çok daha kolaylaştıracaklardır. Bir şekilde, belirli bir bileşen için standart gereklilikleri belirliyorsunuz.

Diğer yorumlar

Tüm bileşenlerinizi ayrı ayrı dosyalara bölmeniz gerektiğini vurgulamak istiyorum.

Bir yönlendirici kullanın: Burada tek bir sayfa uygulaması oluşturmak istiyorsanız yönlendiriciye ihtiyacınız olması dışında söylenecek fazla bir şey yok. Şahsen React Router kullanıyorum.

Akı kullanıyorsanız, olayları değiştirmek için mağazayı dinlemeyi unutmayın. Hafıza sızıntısı oluşturmak istemezsiniz.

Uygulamanızın başlığını dinamik olarak değiştirmek istiyorsanız, bunun gibi bir şey yapabilirsiniz:

Bu repo, React / Redux kimlik doğrulamasına harika bir örnektir.

2017'deki yenilikler

Büyük bir yeniden yazma için hazır olun. Tepkilerin yaratıcıları şimdi yeniden inşa etme tepkisi çekiyor. Daha iyi performans, daha iyi animasyonlar ve büyük uygulamalar oluşturmak için kullanabileceğiniz daha fazla API'ye sahiptir. Buradan daha fazla okuyabilirsiniz.

Faydalı yardımcı fonksiyonlar

Aşağıdaki işlev bir Nesne karşılaştırma işlevidir. Kullanım: devletin veya propsiyonların shouldComponentUpdate'te değişip değişmediğini kontrol edin

Dinamik olarak redüktör oluşturun

Kullanımı:

Sabitleri oluşturun:

Render eğer:

Kullanımı: eğer bir şey varsa bileşen oluşturma

Durum değerini dinamik olarak değiştir:

Webpack.config.js

Burada Yüksek Performanslı Uygulamaları Tepki Etme hakkında okumaya devam edin.

Bu makaleyi beğendiyseniz, lütfen aşağıdaki yeşil click tuşa tıklayın, böylece başkaları da beğenebilir. Ayrıca lütfen sorularınızı sorun ya da bildiğiniz yararlı uygulamalarla veya yararlı işlevlerle not bırakın.

Twitter @nesbtesh'de beni takip et