React kod yapısı nasıl tasarlanır?
Bir projenin dosya ve bileşen yapısı, hatta belirli bir bileşenin iç yapısı nasıl tasarlanır? Bu sorunun asla doğru cevabı yoktur.
Yazar | Mathilde Wærstad
Çevirmen | Crescent Moon, sorumlu editör | Guo Rui
Aşağıdaki çeviridir:
Pek çok konu gibi, birçok insanın farklı fikirleri var ve birçok çözüm var.
Belki kendi fikirleriniz kişisel deneyimlerinizden etkilenecektir.Örneğin, neyin okunması, analiz edilmesi kolay ve hatta güzel olduğu konusunda kendi fikirleriniz var. Bir takıma katıldığınızda, genellikle hepinizin bu yapısal sorunlar üzerinde anlaşmaya varmanız gerekir ki bu kolay değildir.
Bu tür bir tartışma, iki kişinin hangi rengin en iyi, mavi veya kırmızı olduğunu tartışması gibidir. Hepsi kendi fikirlerini savunuyor, görüşlerini netleştiriyor ve sonra kendi fikirlerine bağlı kalıyorlar. Morun en iyisi olduğunu düşünmek gibi asla taviz vermeyecekler.
Dolayısıyla bu konuda herhangi bir fikir birliğine varmayı beklemiyorum. Bu makalede, yalnızca React kod yapısını tasarlarken kişisel tercihlerimi ve bunun nedenlerini tanıtacağım. Umarım ondan bir şeyler öğrenebilirsin veya en azından bu sorunu farklı bir bakış açısıyla anlayabilirsin.
Bulmaca
Öncelikle nasıl bir programcı olduğumu kısaca tanıtmak istiyorum. Kod yazarken, yapboz gibi temel bileşenler olarak inşa etmem gerekenleri düşünüyorum. Yazdığım her işlev, her işlev, her bileşen bir bulmacanın parçası.
Yaptığım şeyi görselleştirmeyi seviyorum. Problemi resim çizerek açıklamayı sevdiğimde, kullanıcıların gerçekte kullandıkları UI özelliklerini koda yansıtabilmek istiyorum.
Benim için bir başka önemli şey daha var: Genel görünümü hızlı bir şekilde görebilmek ve bileşenin işlevini olabildiğince basit bir şekilde anlayabilmek. Bu hedeflerin her ikisine de doğru adlandırma yöntemi ve görsel yapı seçilerek ulaşılabilir.
Noel Baba dijitalleştirme
Bu makalede, Noel Babanın Dijital İstek Listesi adlı bir proje hayal ettim. Herkes bu projeyi kullanabilir, kullanıcılar oluşturabilir, dilekler ekleyebilir ve kişisel bilgileri görüntüleyebilir.
Aşağıda, açıkça yeniden düzenlenmesi gereken EditMyInformationToSanta bileşeninin kodu yer almaktadır. Bu bileşen aracılığıyla almak istediğiniz Noel hediyelerini ekleyebiliriz.
React'i içe aktarın, {useState} from'react '; {saveMyInformationToSanta} '../../ api / santa-api'den içe aktar; const EditMyInformationToSanta = = > { const = useState (''); const = useState (''); const = useState; const = useState (''); const = useState; const = useState; const = useState (''); const = useState (''); const = useState (); const submitMyInformationToSanta = async olay = > { event.preventDefault; saveMyInformationToSanta ({ isim yaş, Cinsiyet, adres, hasFireplace, yaramaz letterToSanta, dilek listesi }); }; dönüş ( < div > < h1 > Merhaba Noel Baba! Bu benim < / h1 > < form > < h2 > Benim hakkımda: < / h2 > < etiket > < açıklık > Benim ismim: < / span > < giriş type = "text" değer = {isim} placeholder = "Adınızı yazın" onChange = {event = > setName (event.target.value)} / > < /etiket > < etiket > < açıklık > Benim yaşım: < / span > < giriş type = "text" değer = {age} placeholder = "Noel Baba'ya yaşınızı söyleyin" onChange = {event = > setAge (event.target.value)} / > < /etiket > < alan kümesi > < efsane > Ben bir... < / efsane > < etiket > < giriş type = "radyo" değer = "erkek" işaretlendi = {cinsiyet === 'erkek'} onChange = {event = > setGender (event.target.value)} / > Oğlan < /etiket > < etiket > < giriş type = "radyo" değer = "kız" işaretlendi = {cinsiyet === 'kız'} onChange = {event = > setGender (event.target.value)} / > Kız < /etiket > < / fieldset > < etiket > < açıklık > Benim adresim: < / span > < giriş type = "text" değer = {adres} placeholder = "Nerede yaşıyorsunuz?" onChange = {event = > setAddress (event.target.value)} / > < /etiket > < alan kümesi > < efsane > Şöminem var mı? < / efsane > < etiket > < giriş type = "radyo" değer = {true} işaretlendi = {hasFireplace} onChange = {event = > setHasFireplace (event.target.value)} / > Evet < /etiket > < etiket > < giriş type = "radyo" değer = {yanlış} işaretlendi = {hasFireplace === false} onChange = {event = > setHasFireplace (event.target.value)} / > Hayır < /etiket > < / fieldset > < alan kümesi > < efsane > Bu yıl yaramaz mıyım yoksa iyi mi? < / efsane > < etiket > < giriş type = "radyo" değer = "yaramaz" işaretlendi = {naughtyOrNice === 'yaramaz'} onChange = {event = > setNaughtyOrNice (event.target.value)} / > Yaramaz < /etiket > < etiket > < giriş type = "radyo" değer = "güzel" işaretlendi = {naughtyOrNice === 'güzel'} onChange = {event = > setNaughtyOrNice (event.target.value)} / > Güzel < /etiket > < / fieldset > < div > < h2 > Bu yılki dileklerim: < / h2 > < etiket > < açıklık > İstiyorum: < / span > < giriş type = "text" değer = {dilek} placeholder = "Bir dilek yaz" onChange = {event = > setWish (event.target.value)} / > < /etiket > < buton type = "button" value = "Dilek ekle" onClick = {= > { setWishList (wishList.concat (dilek)); setWish (''); }} / > < h3 > Benim dilek listem: < / h3 > < ul > {wishList.map (dilek = > ( < li > {wish} < / li > ))) < / ul > < / div > < div > < h2 > Noel Baba, sana da söylemek istiyorum ... < / h2 > < metin alanı placeholder = "Noel Baba'ya bir şey söylemek ister misiniz?" onChange = {event = > setLetterToSanta (event.target.value)} değer = {letterToSanta} / > < / div > < button type = "submit" onClick = {submitMyInformationToSanta} / > < /form > < / div > ); }; varsayılan EditMyInformationToSanta'yı dışa aktar;Bileşenin kendisi karmaşık bir içeriğe sahip değildir, ancak bu form çok büyük olduğundan ve çok fazla bilgi içerdiğinden, dosya çok büyük veya çok uzun. Bunu iyileştirmek için kodu birden çok bileşene böldüm.
Tekrarlanan giriş kutularının ve radyo düğmelerinin düzeni gibi bazı sorunlar açıktır, bu nedenle bunu bir giriş noktası olarak kullanabiliriz. Aşağıda yeniden düzenlenen kod yer almaktadır:
React'i içe aktarın, {useState} from'react '; {saveMyInformationToSanta} '../../ api / santa-api'den içe aktar; TextInputWithLabel öğesini './ TextInputWithLabel'den içe aktarın; './ RadioToggle'dan RadioToggle'ı içe aktarın; const EditMyInformationToSanta = = > { const = useState (''); const = useState (''); const = useState; const = useState (''); const = useState; const = useState; const = useState (''); const = useState (''); const = useState (); const submitMyInformationToSanta = async olay = > { event.preventDefault; saveMyInformationToSanta ({ isim yaş, Cinsiyet, adres, hasFireplace, yaramaz letterToSanta, dilek listesi }); }; dönüş ( < div > < h1 > Merhaba Noel Baba! Bu benim < / h1 > < form > < h2 > Benim hakkımda < / h2 > < TextInputWithLabel label = "Benim adım:" placeholder = "Adınızı yazın" değer = {isim} onChange = {event = > setName (event.target.value)} / > < TextInputWithLabel label = "Yaşım:" placeholder = "Noel Baba'ya yaşınızı söyleyin" değer = {age} onChange = {event = > setAge (event.target.value)} / > < RadioToggle soru = "Ben bir ..." label1 = "Erkek" toggleValue1 = "erkek" label2 = "Kız" toggleValue2 = "kız" değer = {cinsiyet} onChange = {event = > setGender (event.target.value)} / > < TextInputWithLabel label = "Adresim:" placeholder = "Nerede yaşıyorsunuz?" değer = {adres} onChange = {event = > setAddress (event.target.value)} / > < RadioToggle soru = "Şöminem var mı?" label1 = "Evet" toggleValue1 = {true} label2 = "Hayır" toggleValue2 = {false} değer = {hasFireplace} onChange = {event = > setHasFireplace (event.target.value)} / > < RadioToggle soru = "Bu yıl yaramaz mıyım yoksa iyi mi?" label1 = "Yaramaz" toggleValue1 = "yaramaz" label2 = "Güzel" toggleValue2 = "güzel" değer = {naughtyOrNice} onChange = {event = > setNaughtyOrNice (event.target.value)} / > < div > < h2 > Bu yılki dileklerim: < / h2 > < TextInputWithLabel label = "İstiyorum:" placeholder = "Bir dilek yaz" değer = {dilek} onChange = {event = > setWish (event.target.value)} / > < buton type = "button" value = "Dilek ekle" onClick = {= > { setWishList (wishList.concat (dilek)); setWish (''); }} / > < h3 > Benim dilek listem: < / h3 > < ul > {wishList.map (dilek = > ( < li > {wish} < / li > ))} < / ul > < / div > < div > < h2 > Noel Baba, sana da söylemek istiyorum ... < / h2 > < metin alanı placeholder = "Noel Baba'ya bir şey söylemek ister misiniz?" onChange = {event = > setLetterToSanta (event.target.value)} değer = {letterToSanta} / > < / div > < button type = "submit" onClick = {submitMyInformationToSanta} / > < /form > < / div > ); }; varsayılan EditMyInformationToSanta'yı dışa aktar;Giriş kutusunun ve radyo düğmelerinin uygulamanın başka bir yerinde kullanılıp kullanılmayacağından emin olmasam da, bunları ayrı bir dosyaya taşımaya karar verdim. Bu dosyalar, kullanım kolaylığı için orijinal bileşenlere mümkün olduğunca yakın tutulmalıdır.
Bileşenleri ayrı tutun!
Birçok geliştirici, yukarıdaki örneğe benzer kısmi bileşenleri bir dosyaya koymayı sever, ancak ben bir dosyada en fazla yalnızca bir bileşen kaydetme eğilimindeyim. Benim için, kodun genel resmini anlarken, birden çok bileşen içeren bir dosyaya göre yalnızca bir bileşen içeren bir dosyaya sahip olmak daha kolaydır.
Bu durumda, fark çok büyük olmayabilir, çünkü yeniden düzenlemek istediğim bileşen çok büyük değildir, ancak bileşen boyutu arttıkça sorun ortaya çıkacaktır. Birkaç hafta sonra "kök" bileşeni bulmak için dosyada yukarı ve aşağı kaydırmanız gerekecek ve bu çok zahmetli olabilir.
Basit kuralları severim, böylece yeniden düzenleme sırasında dahili tartışmalardan kaçınılabilir ve bileşenleri ayrı dosyalara ne zaman koyacağımı tartışmaya gerek kalmaz.
Etki alanına göre ayıkla
Örneğimize geri dönelim. Yinelenen kodu yeniden kullanılabilir bileşenlere çıkarmış olsak da, yeniden düzenleme için hala yer olduğunu düşünüyorum. Aynı işlevin kodunu kodun işlevine göre yeniden yapılandırmak istiyorum. Aşağıdaki örnekte, formun her bir parçasının, yani AboutMe, LetterToSanta ve MyWishes bileşenlerini çıkardım.
React'i içe aktarın, {useState} from'react '; {saveMyInformationToSanta} '../../ api / santa-api'den içe aktar; AboutMe'yi './ AboutMe'den içe aktarın; MyWishes'i './ MyWishes'den içe aktarın; LetterToSanta'yı './ LetterToSanta'dan içe aktarın; const EditMyInformationToSanta = = > { const = useState ({ isim: '', yaş:'', adres:'', Cinsiyet:, hasFireplace :, naughtyOrNice :, }); const = useState (''); const = useState (''); const = useState (); const submitMyInformationToSanta = async olay = > { event.preventDefault; saveMyInformationToSanta ({ ...ben mi, letterToSanta, dilek listesi }); }; dönüş ( < div > < h1 > Merhaba Noel Baba! Bu benim < / h1 > < form > < AboutMe me = {me} onMeChange = {updatedMeState = > setMeState (updatedMeState)} / > < MyWishes dilek = {wish} wishList = {wishList} onWishChange = {setWish} onWishListChange = {setWishList} / > < LetterToSanta letterToSanta = {letterToSanta} onLetterChange = {setLetterToSanta} / > < button type = "submit" onClick = {submitMyInformationToSanta} / > < /form > < / div > ); }; varsayılan EditMyInformationToSanta'yı dışa aktar;Projenin tam kodu burada (https://github.com/mathilwa/WishesToSanta).
Şimdi, EditMyInformationToSanta.jsx dosyasının yanı sıra, bu dizinde bir sürü basit bileşen dosyası var. Her dosya küçüktür ve tek tek anlaşılması kolaydır.
Formun her bir parçasına karşılık gelen bileşenler EditMyInformationToSanta.jsx dosyası ile sınırlıdır, bu yüzden onları aynı dizine koyuyorum. Yeniden düzenlemenin amacı, ana dosyanın temiz ve anlaşılması kolay görünmesini sağlamaktır. Bu dizine stiller, resimler, metin, araç işlevleri veya diğer kaynaklar gibi diğer ilgili dosyaları da koyabiliriz.
Alan ve bileşen
Noel Baba'nın konumunu gerçek zamanlı olarak izlemek için SantaLocation API'yi kullanmak veya en çok beklenen on hediyeyi görüntülemek gibi uygulamalar büyümeye devam edecek, bir gün sunum katmanı bileşenlerini yeniden kullandığınız bir durumla karşılaşacaksınız. Kodu iki dizine bölmeyi seviyorum: / components ve / domain, amaç sunum katmanı bileşenlerini ayırmaktır.
/ domain, uygulamanın etki alanı mantığını içerir. EditMyInformationToSanta ve ilgili dosyalar bu dizinde.
/ components, projedeki tüm yeniden kullanılabilir bileşenleri içerir. Tipik örnek, / domain / edit-my-information-santa dizininden / components / text-input-with-label klasörüne taşıdığımız TextInputWithLabel'dir. / Domain dizini gibi, bu dizin de metin, stiller vb. Gibi ilgili dosyaları içerebilir.
Düzenli olun
React kodunun düzenini nasıl tasarlayacağımızı tartışıyorduk. Özetle:
Sunum katmanı mantığını, yeniden kullanıma ve aynı zamanda kök bileşeni basitleştirmeye elverişli olan ayrı bir bileşene çıkarmayı seviyorum.
Her bileşeni kendi dosyasına koyuyorum, kullanıcı arayüzü çok karmaşık hale gelse bile bu ilkeye uyulmalıdır. Bunun nedeni, her dosyanın anlaşılmasını kolaylaştırmak için yalnızca bir bileşen içermesidir. Her dosya kısadır, böylece genel durumu görebilirsiniz ve iyi bir bileşen adlandırma (ve dosya adlandırma) her bir bileşenin rolünü anlamamıza yardımcı olabilir.
Bileşenleri tek kullanımlık etki alanı mantık bileşenlerine ve yeniden kullanılabilir bileşenlere ayırmak, koda göz atmayı ve silmeyi kolaylaştırabilir.
Bir danışman olarak, başkalarının kodunu okumak için çok zaman harcamanız gerekir. Kodu okuma sürecinin sorunsuz ilerlemesini sağlamak önemlidir. Çoğu zaman mevcut kodu değiştiriyorum veya genişletiyorum ve basit, sağlam ve anlaşılması kolay bir kod yapısı işinizi daha hızlı tamamlamanıza yardımcı olabilir.
Başkalarının fikirlerini kabul edin
Son olarak bu makaleyi bu yazının başındaki noktalarla bitirmek istiyorum. Takımdaki farklı kişilerin farklı tercihleri ve tercihleri vardır ve bunu kabul etmek kolay değildir. Ama bunu kabul etmek zorunda mısın? Evet demek istiyorum Neyin güzel olduğunu kabul etmek zorunda değilsiniz, bazı insanlar tam olarak aynı fikirde olmasa bile projede belirli bir kod stilini ve yapısını kabul etmeniz gerektiğinden değil.
Tüm ekibin "temizlik" veya "okunması kolay" konularda anlaşması gerçekçi değildir. En önemlisi herkesin kendi düşüncesini dile getirmesi, bu yöntemin neden kullanıldığını herkesin vurgulaması ve takımın bu yöntemi kullanması gerektiğini aktif olarak tartışmasıdır. Takımdaki çoğu insan (hepsi değilse de) fikirlerini ifade edecek, ancak herkesin tercihlerini karşılamak için birden çok stili karıştırmak yerine birleşik bir kod stili ve yapısını kabul etmenin daha iyi olacağını düşünüyorum.
Nihai seçim ne olursa olsun, birleşik bir çözümü kabul etmek, projede düzgün, temiz, anlaşılması kolay ve standartlaştırılmış bir kod stili oluşturabilir.
Orijinal: https://react.christmas/2019/22
Bu makale bir CSDN çevirisidir, lütfen yeniden basımın kaynağını belirtin.
WeChat doğrudan QQ'ya para aktarabilir; Xiaomi ve China Unicom mevcut en ucuz 5G paketini başlattı; Git 2.25.0 yayınlandı | Geek Headlines
Programcının yapısında her zaman sorun varsa ne yapmalıyım?
Jia Yangqing teşekkür mektubu: Ali açık kaynak 10 yıldır, binlerce açık kaynak insanı anıyor
Demir Dövüşü Bahar Şenliği Galası, Flowing Internet Company
Damo Academy 2020 Tahmini: Modülerlik Çip Tasarımının Eşiğini Düşürüyor | Çin'in BT Teknolojisindeki Evrimi Hakkında Sorular
Bir programcı ile paylaşmayın!
Model tabanlı pekiştirmeli öğrenme yöntemlerini araştırdıktan sonra şu sonuçları aldık
Rastgele konuşma: Kız arkadaşıma, bazı web sitelerinin neden yıl sonunda tarih kargaşası yaşayacağını nasıl açıklayabilirim?
