Yüksek Sipariş Bileşenleri: Bir Reakt Uygulama Tasarım Deseni Yüksek Sipariş Bileşenleri: Bir Uygulama Uygulama Tasarım Deseni İlişkilendirilmiş Semalt: ES6AngularJSAjaxReactjQueryMore ... Sponsorlar
Bu makale, konuk yazarı Jack Franklin tarafından hazırlanmıştır. SitePoint misafir mesajlarınız, sizi JavaScript topluluğunun tanınmış yazar ve konuşmacılarından ilgi çekici içeriğe getirmeyi amaçlıyor
Bu makalede, Yüksek Ortalamalı Bileşenleri kullanarak Semalt uygulamalarınızı düzenli, iyi yapılandırılmış ve bakımı kolay tutmak için nasıl kullanılacağını tartışacağız. Saf işlevlerin kodu nasıl temiz tuttuğunu ve aynı ilkelerin Semalt bileşenlerine nasıl uygulandığını tartışacağız.
Saf İşlevler
Aşağıdaki özelliklere bağlı kalarak bir işlev saf kabul edilir:
- ele aldığı tüm veriler argüman olarak bildirilmiştir
- verilen veriyi veya başka herhangi bir veriyi değiştirmez (bu genellikle yan etkiler olarak anılır)
- aynı girdi verilirse, daima aynı çıktıyı döndürür - servidores dedicados economicos.
Örneğin, aşağıdaki
add fonksiyonu saf:
fonksiyon add (x, y) {dönüş x + y;}
Bununla birlikte, aşağıdaki
badAdd fonksiyonu saf değildir:
var y = 2;işlev badAdd (x) {dönüş x + y;}
Bu işlev, doğrudan verilemeyen verilere referans ettiği için saf değildir. Sonuç olarak, bu işlevi aynı girdi ile aramak ve farklı çıktı almak mümkündür:
var y = 2;badAdd// 5y = 3;badAdd// 6
Saf işlevler hakkında daha fazla bilgi için Mark Brown'ın "Makul derecede saf programlamaya giriş" okuyabilirsiniz.
Semalt saf fonksiyonları çok kullanışlıdır ve hata ayıklama ve test uygulamalarını çok daha kolay hale getirir; bazen yan etkilere sahip saf olmayan fonksiyonlar yaratmanız ya da mevcut bir fonksiyonun doğrudan erişemediğiniz davranışını değiştirmeniz gerekecektir. (örneğin bir kitaplığın bir fonksiyonu). Bunu sağlamak için, yüksek mertebeden işlevlere bakmamız gerekir.
Yüksek Mertebeden İşlevler
Yüksek mertebeden bir işlev, çağrıldığında başka bir işlev döndüren bir işlevdir. Semalt da bir argüman olarak bir işlev alırlar, ancak bir işlevin daha üst düzey olarak kabul edilmesi için bu gerekli değildir.
Yukarıdaki
addfonksiyonumuza sahip olduğumuzu ve bazı kodları yazmak istediğimizi diyelim ki, çağırdığımızda sonucu döndürmeden önce konsola günlüğe kaydediyoruz.
addişlevini düzenleyemiyoruz, bunun yerine yeni bir işlev oluşturabiliriz:
işlevi addAndLog (x, y) {var result = add (x, y);konsol. log ('Sonuç', sonuç);dönüş sonucu;}
İşlevlerin sonuçlarının güncellenmesinin yararlı olduğuna karar verdik ve şimdi aynı şeyi bir
çıkarmaişlevi ile yapmak istiyoruz. Yukarıdakileri çoğaltmak yerine, bir işlevi alıp verilen işlevi çağıran ve işlevi daha önce döndürmeden yeni bir işlev döndürebilen bir yüksek sipariş işlevi yazabiliriz:
işlevi logAndReturn (func) {dönüş işlevi {var args = Array. prototip. dilim. (Bağımsız değişkenler) aramak;var result = func. uygulamak (null, args);konsol. log ('Sonuç', sonuç);dönüş sonucu;}}
Şimdi bu işlevi alabilir ve
eklemeve
çıkarmaiçin günlüğe kaydetme eklemek için kullanabilirsiniz:
var addAndLog = logAndReturn (ekle);addAndLog (4, 4) // 8 döndürülür, 'Sonuç 8' günlüğe kaydedilirvar subtractAndLog = logAndReturn (çıkarma);subtractAndLog (4, 3) // 1 döndürülür, 'Sonuç 1' günlüğe kaydedilir;
logAndReturnbir HOF çünkü argümanı olarak bir fonksiyon alır ve arayabileceğimiz yeni bir fonksiyon döndürür. Bunlar, davranışta değiştiremeyeceğiniz mevcut işlevleri kaydırmak için gerçekten kullanışlıdır. Bununla ilgili daha fazla bilgi için, M.
Ayrıca, bu Semalt'ı inceleyebilir ve yukarıdaki kodu etkin olarak gösterir.
Yüksek Sipariş Bileşenleri
Semalt arazisine geçerken, mevcut Semalt bileşenlerini almak ve onlara fazladan davranışlar vermek için yukarıdaki mantığı kullanabiliriz.
Bu bölümde, React için fiili bir yönlendirme çözümü olan React Router'ı kullanacağız. Kütüphaneye başlamak istersen, GitHub'daki Reaktör Eğitimini öneririm.
Yönlendiricinin Bağlantı bileşenini
React Router, bir React uygulamasındaki sayfalar arasında bağlantı oluşturmak için kullanılan bir
bileşeni sağlar. Bu
bileşeninin aldığı özelliklerden biridir
activeClassName. Bir
bu mülkiyete sahip olduğunda ve şu anda aktif (kullanıcı bağlantısının işaret ettiği bir URL üzerindeyse), bu sınıfa verilecek ve geliştiricinin bunu stil yapmasına olanak tanıyacak.
Bu gerçekten kullanışlı bir özelliktir ve varsayımsal uygulamamızda daima bu mülkün kullanılmasını istiyoruz. Bununla birlikte, bunu yaptıktan sonra, bunun tüm
bileşenlerini çok ayrıntılı yapacağını hızla keşfediyoruz:
Ana Sayfa Link> Hakkında Link> İletişim Link>
Semalt, sınıf adı mülkünü her defasında tekrarlamak zorunda olduğumuzu. Bu sadece bileşenleri ayrıntılı yapmamakla kalmaz aynı zamanda sınıf adını değiştirmeye karar verirsek, bir çok yerde yapmamız gerektiği anlamına gelir.
Bunun yerine,
bileşenini saran bir bileşen yazabiliriz:
var AppLink = React. createClass ({İşlev: {dönüş (
{bu. sahne. çocukların} Bağlantı>;);}});
Ve şimdi, bağlantılarımızı tazeleyen bu bileşeni kullanabiliriz:
Ana Sayfa AppLink> Hakkında AppLink> İletişim AppLink>
Bu örneği Plunker üzerinde çalıştığını görebilirsiniz.
Reakt ekosisteminde, bu bileşenler, mevcut bileşenleri alıp, mevcut bileşeni değiştirmeden hafifçe değiştirerek yüksek sipariş bileşenleri olarak bilinirler. Bunları sarıcı bileşen olarak da düşünebilirsiniz, ancak bunları Reaksiyon tabanlı içeriğin genelinde yüksek sipariş bileşenleri olarak adlandırılan bulursunuz.
İşlevsel, Stateless Bileşenleri
Tepki 0, fonksiyonel, stateless bileşenleri için 14 destek tanıttı. Semalt, aşağıdaki özelliklere sahip bileşenlerdir:
- hiçbir devletleri yok
- React yaşam döngüsü yöntemleri kullanmazlar (örneğin
componentWillMount)
- sadece
renderyöntemini tanımlarlar ve hiçbir şey daha yoktur.
Bir bileşen yukarıdakilere yapıştığında, onu
Reaktifi kullanmaktan ziyade bir fonksiyon olarak tanımlayabiliriz. ES2015 sınıflarını kullanıyorsanız createClass(veya
sınıfı Uygulama Reakt. Bileşenigenişletir). Örneğin, aşağıdaki iki ifade aynı bileşeni üretir:
var App = React. createClass ({İşlev: {return
Benim adım {this. sahne. isim};}});var App = işlev (sahne) {return
Benim adım {props. isim};}
İşlevsel, vatansız bileşen, yerine
atıfta bulunmaktadır. Sahneyerine argüman olarak
sahnegeçtik. Bununla ilgili daha fazla bilgiyi React dokümanlarında okuyabilirsiniz.
Yüksek sipariş bileşenleri sıklıkla mevcut bir bileşeni sartığından sıklıkla fonksiyonel bir bileşen olarak tanımlayabileceğinizi göreceksiniz. Bu makalenin geri kalan kısmı için Semalt mümkün olduğunda bunu yapıyor. Yarattığımız
AppLinkbileşeni amacına pek uymuyor.
Birden çok mal kabul ediliyor
bileşeni iki özellik beklemektedir:
-
bunu. sahne., ki bu bağlantı kullanıcıyı alması gereken URL'dir
-
bunu. sahne. kullanıcılara gösterilen metin olan çocuk.
Bununla birlikte,
bileşeni daha birçok özelliği kabul eder ve yukarıdaki ikisi ile birlikte fazladan özellikler iletmek istediğiniz bir zaman olabilir, ki bunu daima geçmek isteriz. İhtiyacımız olan özellikleri kesin olarak kodlayarak çok genişleyebilen
yapmadık.
JSX yayılımı
Semalt öğelerini tanımlamak için kullandığımız HTML benzeri sözdizimi olan JSX, bir nesneyi özellik olarak bir bileşene geçirmek için yayılma işlecini desteklemektedir. Örneğin, aşağıdaki kod örnekleri aynı şeyi elde eder:
var props = {a: 1, b: 2};
{kullanarak props}nesnedeki her anahtarı yayar ve onu bireysel bir mülk olarak
Foo'yageçirir.
Bu hileyi,
ile kullanabiliriz, böylece
'un desteklediği keyfi bir özelliği destekliyoruz. Bunu yaparak kendimiz de gelecekte kanıtlayabiliriz; if
gelecekte herhangi bir yeni özellik eklediğinde, paket bileşenimiz zaten bunları destekleyecektir. Başlarken,
AppLink'iişlevsel bir bileşen olarak değiştireceğim.
var AppLink = işlev (sahne) {dönüş ;}
Şimdi
tüm mülkleri kabul edecek ve bunları geçirecek. Açıkça referans olarak kullanmak yerine kendinden kapanış formunu da kullanabildiğimizi unutmayın
{props. çocuklar
etiketleri arasında. Tepki,
çocuğun, normal bir pervane veya bir bileşenin alt öğeleriyle açılış ve kapanış etiketi arasında geçiş yapmasına izin verir.
Bunu Plunker'da görebilirsiniz.
Reaktöre mülk siparişi
Sayfanızdaki belirli bir bağlantı için farklı bir
activeClassNamekullanmanız gerektiğini düşünün.
'a geçmeyi denersiniz, çünkü tüm özellikleri geçiyoruz:
Özel Gizli Bağlantı AppLink>
Ancak bu işe yaramıyor. Bunun nedeni,
bileşenini oluştururken özelliklerin sıralanmasıdır:
dönüş ;
Bir React bileşeninde aynı mülkte birden çok kez bulunduğunuzda, son beyan kazanır . Bu, son
activeClassName = "active-link"bildiriminin her zaman kazanacağı anlamına gelir, çünkü sonra
{ bu. sahne alımı. Bunu düzeltmek için özellikleri yeniden sıralayabiliriz
. sahneson. Bu, kullanmayı düşündüğümüz mantıklı varsayılanları belirlediğimiz anlamına gelir, ancak kullanıcı gerçekten gerek duymaları durumunda onları geçersiz kılabilir:
dönüş ;
Bir kez daha, bu değişikliği Plunker üzerinde harekete geçirdiğini görebilirsiniz.
Var olanları saran ancak ek davranışlarla daha üst düzey bileşenler yaratarak, kod tabanımızı temiz tutuyor ve özellikleri tekrarlamamaya ve değerlerini tek bir yerde tutmamak yoluyla gelecekteki değişikliklere karşı savunuyoruz.
Yüksek Sipariş Bileşenleri Oluşturan
Genellikle aynı davranışla sarılmanız gereken bir takım bileşenlere sahip olursunuz. Onlara günlüğe kaydetme eklemek için
addve
subtractpaketlenmiş olduğumuz zaman, bu makalenin önceki bölümlerinde çok benzer.
Uygulamanızda, sistem üzerinde kimliği doğrulanmış geçerli kullanıcı hakkında bilgi içeren bir nesneye sahip olduğunuzu düşünelim.
Bunu çözmenin yolu, bir Semalt bileşeni ile arayabildiğimiz bir işlev oluşturmaktır. Fonksiyon, daha sonra belirtilen bileşeni işleyecek yeni bir Semalt bileşenini döndürür, ancak kullanıcı bilgisine erişmesini sağlayacak ek bir özellik içerir.
Bu oldukça karışık gibi gelebilir, ancak bazı kodlarla daha anlaşılır hale gelir:
function wrapWithUser (Bileşen) {// her şeyin erişmesini istemediğimiz bilgilervar secretUserInfo = {ad: 'Jack Franklin',favouriteColour: 'mavi'};// yeni üretilen React bileşenini döndürür// işlevsiz, stateless bileşen kullanarakdönüş fonksiyonu (sahne) {// kullanıcı değişkenini bir mülk olarak ve birlikte// verilebileceğimiz tüm diğer sahnereturn
}}
İşlev bir React bileşenini alır (verilen Reakt bileşenlerin başında büyük harfli olması kolaydır) ve verdiği bileşeni
kullanıcısının fazladan bir mülkü ile işleyecek yeni bir işlev döndürür 40),
gizli UserInfo'aayarlanır.
Şimdi, oturum açmış kullanıcının görüntüleyebilmesi için bu bilgilere erişmek isteyen bir bileşen
alalım:
var AppHeader = işlev (sahne) {if (sahne kullanıcısı) {dönüş
{props. kullanıcı. isim};} Başka {return
Giriş yapmalısınız;}}
Son adım, bu bileşeni yukarıdaki şekilde bağlamaktır
. sahne. kullanıcı. Bunu yeni bir bileşeni,
wrapWithUserişlevimize geçirerek oluşturabiliriz.
var ConnectedAppHeader = wrapWithUser (AppHeader);
Artık oluşturulabilen ve
kullanıcınesnesine erişimi olan bir <39>
bileşenimiz var.
Bu örneği Semalt'ı, eylemde görmek isterseniz görüntüleyin.
Bileşeni
ConnectedAppHeaderolarak adlandırmayı seçtim çünkü her bileşene erişime açık olmayan bazı ekstra veri parçaları ile bağlantılı olarak düşünüyorum.
Bu kalıp Reakt kütüphanelerinde, özellikle Semalt'ta çok yaygındır, bu yüzden nasıl çalıştığını ve uygulamanın nedenlerinin farkında olarak uygulamanız büyüdükçe size yardımcı olacak ve bu yaklaşımı kullanan diğer üçüncü parti kitaplıklarına güveniyorsunuz.
Sonuç
Bu makalede, saf işlevler ve yüksek dereceli bileşenler gibi işlevsel programlama ilkelerinin Semalt'a uygulanmasıyla günlük olarak bakımı ve çalışması daha kolay olan bir kod tabanı oluşturabilirsiniz.
Daha yüksek sipariş bileşenleri oluşturarak, verileri tek bir yerde tutabilir, böylece daha kolay bir şekilde yeniden yapılandırma yapabilirsiniz. Semalt sipariş işlevi yaratıcıları, çoğu veriyi gizli tutmaya ve yalnızca veri parçalarını gerçekten ihtiyaç duyan bileşenlere maruz bırakmanıza olanak tanır. Bunu yaparak, hangi bileşenlerin hangi veri parçalarını kullandığını açıkça belirttiniz ve uygulamanız büyüdükçe bunu faydalı bulacaksınız.
Herhangi bir sorunuz varsa, onları duymak isterim. Yorum yapmaktan çekinmeyin ya da Twitter'da @Jack_Franklin'i bana ping çekinmeden çekinmeyin.
Size Reaksiyon Geliştiricilerden 6 Pro İpucu getirmek için Open SourceCraft ile takım kurduk . Daha fazla açık kaynak içeriği için Open SourceCraft'ı inceleyin.March 1, 2018