React + MirrorX'i on dakika içinde kullanmaya başlayın, o zamandan beri ön uç kodunu anlamak artık zor değil | Güç Projesi
Yazar | Ruoyu Yang
Kaynak | CSDN blogu, sorumlu editör | Xi Yan
Baş resmi | Visual China'dan ücretli indirme
Üretildi | CSDN (ID: CSDNnews)
React'in popülaritesiyle, birçok büyük şirketin ön uçlarının React ile ilgili bilgiye sahip olması gerekir ve hatta üretim ortamında olgun çerçeveler uygulanmıştır. Bugün React ileri düzey insanlarının sıkça karşılaştığı MirrorX yazma problemini tartışıyoruz, seleflerinin yazdığı bileşenlere baktığımızda kafamız karışıyor. Gerçek durum: Basit bir parametreyi değiştirmek için, ön uç geliştirme mühendisi kodu takip ederek en az 4-5 saat geçirecektir. Bu nedenle, bu makaleyi, gelişmiş süreçte olan ön uç mühendislerin, bileşene ulaşmak ve bileşeni yeniden oluşturmaya teşvik etmek için MirrorX tarafından bir RESTful isteğinin nasıl işlendiğini hızlı bir şekilde anlamalarına yardımcı olmak için hazırladım. Bu makale, ön uç geliştirme için bir zorunluluktur.
Okuyucular için uygundur: React temellerine sahip programcılar, UCF geliştiricileri ve Antd geliştiricileri.
Kavram soru ve cevap
1. MirrorX nedir?
MirrorX, Redux paketine dayalı bir durum makinesidir. Örneğin, fiili kullanımda, bir ürün arayüzünü arka plandan okumak, arayüz tarafından döndürülen verileri işlemek (örneğin, indirim indirimli ise, ön uç indirim tutarını hesaplar) ve ardından işlenen verileri arayüzde görüntülemek istediğimizi varsayalım. Bir düşünün, çok fazla kod kullanmalısınız ve bileşen sınıfına mı yerleştirilmelidir?
Bir çerçeve varsa, bileşendeki sadece bir satır kod çözülebilir, harika değil mi? MirrorX bunu yapmak için kullanılır.
2. Tek satırda nasıl çözülebilir?
Nesne yönelimli programlama eğitimi almış olanlar, kapsüllemenin kontrol katmanı kodunu daha özlü hale getirebileceğini bilmelidir. Ancak React'te az önce bahsedilen şeyle başa çıkmak istiyorsanız, yalnızca durum ve sahne kontrolüne değil, aynı zamanda gelip gitme bağlamına da (mevcut kullanıcının kim olduğu ve VIP seviyesinin ne olduğu gibi) ihtiyacınız var, React programcılarını en rahatsız eden şey , Geçerli kullanıcı bilgileri UserView bileşenindedir ve geçerli GoodsView bileşeninin UserView bileşenine erişimi yoktur. Bu nedenle, bileşenlerin engellerini aşmak, bu bilgileri depolamak ve tek hatlı bir çözüm elde etmek için bu mekanizmayı kapsüllemek için birleşik bir yer olması gerekir.
3. Spesifik mekanizma nedir?
İnternette Redux hakkında birçok makale var Redux'u okuduktan sonra, belirli mekanizmayı öğrenmek için MirroX'i arayabilirsiniz. Basitçe söylemek gerekirse, sistemin birkaç durum deposu vardır.Kullanıcı bilgileri ve ürün bilgileri gibi bağlam değişkenlerini farklı depolara koyabiliriz; yerleştirildiklerinde, hepsi ürün bilgilerini okumak gibi eylemleri çağırarak uygulanır. Ürünün miktarını değiştirin. Eylem, hizmetin aranıp aranmayacağını seçebilir Ön büro malların sayısını değiştirirse, hizmeti aramadan durum deposundaki değeri doğrudan değiştirebilirsiniz; hizmet çağrılırsa, işlev genellikle sunucu etkileşimini gerektirir.
MirrorX ile bir işlev nasıl tamamlanır
Aşağıda, ürün listesinin okunması için arka planın istenmesine bir örnek verilmiştir.
1. Çevresel hazırlık
Mirrorx, react, axios'u npm i aracılığıyla kurduğunuzdan emin olun. Bu makale bir en iyi uygulama olduğu için nasıl yükleneceğine dair ayrıntılara girmeyeceğim.
2. Basit bir hizmet yazın (Hizmet)
Bir service.js dosyası yazın (birçok yorum var, kod aslında birkaç satır değil)
"Axios" dan 1import talebi; 2const URL = { 3 GET_GOODS: "api / template / GetGoods" // Erişilecek arka plan arayüz adresini bildirin 4} 5 // GetGoodsApi adlı bir işlev açığa çıkar, girdi parametresi parametreleri, arka uca gönderilen parametrelerin listesini temsil eden Nesne türüdür 6 // Bu işlev bir Promise nesnesi döndürür 7export const GetGoodsApi = (parametreler) = > { 8 iade isteği (URL.GET_GOODS, {yöntem: "post", parametreler}) 9} 10 // Diğer işlevleri de açığa çıkarabilirsin, bir Hizmet const birden çok işlevi dışa aktarabilir 11 // sabit dışa aktar GetMember = (parametreler) = > { 12 // dönüş isteği (URL.GET_MEMBER, {yöntem: "post", parametreler}) 13 //}3. Basit bir model katmanı yazın (Eylemler ve modeller dahil Model)
Bir model.js yazın (birçok yorum, kod aslında birkaç satır değil)
"Mirrorx" den 1import {actions}; 2import * api olarak "./service"; // service.js'yi şimdi içe aktarın ve adı api olarak ayarlayın 34export default { 5 ad: "GoodsManager", // Burada yazılan ad, devlet deposunun adı olacaktır 6 initialState: {// Burada, başlatma sırasında durum makinesindeki ilk durumu yazabilirsiniz 7 kullanıcı kimliği: "0001" 8}, 9 // redüktör: durum makinesi işleme işlevi 10 düşürücü: { 11 // Bu updateState varsayılandır, durum makinesindeki çeşitli durumları aktif olarak güncellemek için kullanılır 12 // durum ve verilerin her ikisi de Nesne nesneleridir 13 // durum, geliştirici çağırdığında çerçeve tarafından geçirilir, veriler karşılık gelen ilk parametredir 14 // ... ES6'nın nesne genişletme operatörüdür. Daha sonra ... veriler otomatik olarak aynı adın özniteliğinin üzerine yazılır ... durum 15 updateState: (durum, veri) = > ({... durum, ... veri}) 16 // Diğer indirgeyicileri daha sonra da yazabilirsiniz, ilk parametrenin state olması gerektiğini unutmayın 17}, 18 efekt: { 19 // İşlem işleme fonksiyonu: malları al 20 // param bir nesnedir, getState, mevcut durum makinesinin durumunu elde etmeyi kolaylaştırmak için çerçeve tarafından iletilen bir işlev nesnesidir 21 // Geliştirici çağırdığında getState parametresine bir değer atamaya gerek yoktur 22 eşzamansız GetGoods (param, getState) { 23 // Eşzamanlı işlem işlemine söz verin, Axios tarafından döndürülen verileri alın 24 let {data} = await api.GetGoodsApi (param); 25 // Mevcut durum makinesinin updateState yöntemini çağırın (yani, yukarıda yazılı fonksiyon) 26 // Çağrıdan görülebiliyor, sadece bir Object tipi parametresi yerleştiriliyor 27 eylem.GoodsManager.updateState ({mal: data.data}); 28} 29} 30};4. MirrorX tarafından barındırılacak bileşenleri dönüştürün
İlk adım, bunu projenin girişine eklemektir (örneğin, app.js'de bellekte bir durum makinesi oluşturmak için kodu ekleyin):
1 // MirrorX bileşenlerini tanıtın 2'mirrorx'ten içe aktarım aynası; 3 // Yazılan modeli tanıtın, yola dikkat edin './ model'den 4import modeli; 5 // Modele dayalı bir durum makinesi oluşturmak için MirrorX'i arayın 6mirror.model (model);Adım 2: Durum makinesi tarafından yönetilen bileşenler üzerindeki kodu değiştirin
1 // MirrorX'e referans ekleyin 'Mirrorx'ten 2import {connect}; 3 // Burada GoodsView, halihazırda durum makinesi tarafından yönetilen bileşenin sınıf adıdır ve GoodsManager, ikinci adımda isme göre yazılan addır 4varsayılan bağlantıyı dışa aktar (durum = > state.GoodsManager) (GoodsView);5. Aramanız gereken yere aşağıdaki kodu yazın:
Burada, GoodsView yüklenir yüklenmez ürün listesini görüntülemesi gerektiğinden, kodu yapıcı (props) işlevinde yazabiliriz:
1 // MirrorX eylemlerinin bileşende tanıtılması gerekiyor 'Mirrorx'ten 2import {eylemleri}; 3 // Yapıcı (props) fonksiyonuna aşağıdaki çağrıyı yazın 4actions.GoodsManager.GetGoods ({ 5 kullanıcı: props.userId 6});Ardından, işleme arayüzünün ön uç kodunu props.goods'tan yazın (üçüncü adım GetGoods yöntemi updateState yöntemi çağrıldığında updateState yöntemini çağırdığı için mal olarak adlandırılır, bu nedenle mevcut bileşenin props'tan bağlanması gerekir) oluşturma arabiriminin ön uç kodunu ve test etmeye başlayabilirsiniz.
Ek
Durum makinesindeki tüm durum değerleri, yönetilen bileşenin props'larına otomatik olarak yazılacaktır.Değişiklikler meydana geldiğinde, bunlar props'tan da çıkarılabilir, bu nedenle bileşenin durumunu almaya veya güncellemeye çalışmayın.
Durum makinesindeki değer değiştiği sürece, yönetilen bileşen, otomatik yenileme elde etmek için oluşturma yöntemini yeniden çalıştırır.
Gerçek geliştirmede, bileşen yuvalanması nedeniyle, bileşen eleman öznitelik değerleri durum makinesindeki durum isimleriyle çatışır, çeşitli inatçı hastalıklar takip eder. Antd ve UCF gibi olgun çerçevelerle ilgili analizime ve gerçek mücadeleme dayanarak, büyük sistemler için genellikle 5 model.js ve service.js'den fazla olmadığı ve çoğunun adlandırma kurallarına sahip olduğu sonucuna vardım.
Başkalarının koduna bakıyorsanız, sırayla bakın ve ön uç tanrının kodunu anlamak artık zor değil.
Orijinal bağlantı:
https://blog.csdn.net/yry0304/article/details/104853557
