Back to Question Center
0

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

1 answers:
Yüksek Sipariş Bileşenleri: Bir Uygulama Uygulama Tasarım Deseni

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.

Ö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 - sculture di cavalli in legno. 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 add fonksiyonumuza 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. add iş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 çıkarma iş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 ekleme ve çıkarma iç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;    

logAndReturn bir 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  Hakkında  İletişim     

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};);}});    

Ve şimdi, bağlantılarımızı tazeleyen bu bileşeni kullanabiliriz:

      Ana Sayfa  Hakkında  İletişim     

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 render yö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şeni geniş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. Sahne yerine argüman olarak sahne geç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 AppLink bileş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'ya geç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'i iş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 activeClassName kullanmanız gerektiğini düşünün. 'a geçmeyi denersiniz, çünkü tüm özellikleri geçiyoruz:

      Özel Gizli Bağlantı     

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 . sahne son. 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 add ve subtract paketlenmiş 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'a ayarlanı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, wrapWithUser iş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 ConnectedAppHeader olarak 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.