Muhtemelen Bilmeyeceğiniz Yerel Gelişimi Tepkilendirmek için En İyi 5 Uygulama
Tepki ve yerli tepki kodları yazma deneyimlerime dayanan daha önce birkaç ipucunu paylaştıktan sonra, bugün belki de bilmediğiniz en iyi uygulamaları paylaşacağım ve umarım yerel kodları yazma günlerinizi daha iyi, daha hızlı, daha güçlü hale getirecektir.
1. Her dizinde package.json ile dizin çözünürlüğü (react-native yanında herhangi bir javascript ile çalışır).
İşte ilk ipucu, belki IDE kullanıyorsunuz veya kodlarınızı yazmak için ne kullanıyorsanız kullanıyorsunuz ve belki farklı bir klasör yapısı kullanıyorsunuzdur. Bileşenleri başka bir dizinden her aldığınızda, bu sözdizimini kullanırsınız:
TextComponent öğesini "../ComponentFolder/TextComponent" öğesinden içe aktarın
ya da belki
TextComponent öğesini "../../ComponentFolder/TextComponent" öğesinden içe aktarın
ya da belki daha hardcore
TextComponent’i "../../../../ComponentFolder/TextComponent" öğesinden içe aktarın
ve bunun gibi
İşte yinelenenleri yazmayı unutmanın ipuçları.
ilk olarak, içeri aktarmak istediklerinin her kök dizininde package.json dosyasını oluşturun, bu örnekte bileşenler klasörüdür.
İkinci olarak, bileşeni başka bir dosyadan içe aktarmayı deneyin.
Not: Daha iyi içe aktarma için Bileşen indekslemeyi de kullanabilirsiniz.
2. Her zaman değil, gerektiğinde üçlü operatörleri kullanın.
Üçlü operatörleri kullanmak, belki iyi olanı kullanan veya ifadeleri değiştiren diğer cihazlardan daha iyi görünebilir, ancak her sözdiziminin kendi amaçları vardır. Şu örneklere bak:
// güzel örnek
const data = null; const derpData = veri? 'Ben boş değilim': 'Merhaba ben boşum';
// başka bir örnek
const anotherData = null; const anotherDerpData = veri? anotherData? 'anotherData ve Veri Boş değil': 'anotherData boş ama Veri değil': 'Merhaba, veri boş';
// oh sh * t bu bile okunabilir mi?
Belki fantezi IDE veya fantezi linter kullanıyorsunuzdur, ancak herkesin bunu yapmak veya kullanmak için zamanı yoktu, bu nedenle lütfen bu durumda gerçekten uygun diğer seçenekleri kullanın. Tıpkı havalı çocukların söylediği gibi: Doğru yerdeki doğru adam.
3. Bağımlılıkları kilitleyin, kırılma değişikliklerini önleyin.
Daha fazla bağımlılık eklerken, sürümü kilitlediğinizden emin olun. Lütfen, değişikliklerin bozulmasına dikkat edin, JavaScript, özellikle JavaScript kitaplığı sahnesi gerçekten çok hızlı gidiyor.
Basitçe söylemek gerekirse, kök proje package.json üzerindeki ^ karakterini silin.
4. Düğüm_ modüllerinin içinde değil, proje düzeyini veya uygulama düzeyini build.gradle değiştirin.
Bu ipucu özellikle android tarafı için, bu google firebase eklentilerini 11.8'den 12.0'a yükselttikten sonra kafamda geçti, birçok tepki yerel bağımlılık aşağıdaki gibi son firebase / gms bağımlılığını kullanıyor:
Evet, en son iyidir ama her zaman en iyisi değildir. Belki de bu kanama özelliklerini ve kendisini kodlayan hızlı hareket eden botu beklemektesiniz (hayır, çok ileri gidiyoruz), bunun yerine burada hata var. Öyleyse çözüm nedir?
+ Karakterini, kodlarınızın node_modules içinde daha önce çalıştığı sürümle değiştirebilir ve bu değişiklikleri iş arkadaşlarınız veya gelecekteki proje koruyucularınız için kullanılabilir hale getirmek için kendi git havuzunuzu oluşturabilirsiniz.
VEYA
Uygulama seviyenizi build.gradle değiştirebilirsiniz
ve kararı proje düzeyinde inşa etmeye zorla.
Daha basit değil mi? ve bunları sadece bir depoya itebilirsiniz (projenin kendisi) ve herkes sonsuza dek mutlu yaşar.
5. Daha basit Fonksiyonel Bileşenler yerine Sınıf Tabanlı Bileşenler oluşturun, durumsuz veya durum bilgisi olan bileşenler için PureComponent'i kullanabilirsiniz.
Eski tepki / yerel sürümler için, basit fonksiyonel bileşenle durumsuz bileşen yazmak daha iyi ve daha hızlı olabilir
const Header = () => (Bu Başlık Header);
Efsane, bileşenleri ışık hızından daha hızlı yapan şeydir, ancak işte bu efsaneyi aldatma gerçeği:
İşte reaksiyon belgelerinden alınan daha hızlı PureComponent örneği, daha iyi performans için yerleşik builtComComententUpdate () yöntemini kullanabilirsiniz:
Bu kadar! Okuduğunuz için teşekkürler! lütfen alkışlar alkış alkış
Düzenleme: detaylı örnek ekleyerek # 1