React PropTypes vs. Flow

PropTypes ve Flow benzer şeyleri kapsar ancak farklı yaklaşımlar kullanır. PropTypes, çalışma zamanı sırasında size uyarılar verebilir ve bu, bir sunucudan vb. Gelen hatalı biçimlendirilmiş yanıtları hızlı bir şekilde bulmanıza yardımcı olabilir. Ancak, Flow gelecek gibi görünüyor ve jenerikler gibi kavramlarla çok esnek bir çözüm. Ayrıca Nuclide tarafından sunulan otomatik tamamlama, Flow için büyük bir artıdır.

Şimdi sorum, yeni bir projeye başlarken gitmenin en iyi yolu hangisi? Veya hem Flow hem de PropTypes kullanmak iyi bir çözüm olabilir mi? Her ikisini de kullanmanın sorunu, çok sayıda yinelenen kod yazmanızdır. Bu yazdığım bir müzik çalar uygulamasına bir örnek:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Her iki tanım da temelde aynı bilgileri içerir ve veri türü değiştirildiğinde her iki tanımın da güncellenmesi gerekir.

Tür bildirimlerini PropTypes'e dönüştürmek için bu babel eklentisini buldum, bu bir çözüm olabilir.

Bu soruyu sorduktan bir yıl sonra, bu sorunla ilgili deneyimlerime dair bir güncelleme yapmak istedim.

Flow çok geliştikçe kod tabanımı onunla yazmaya başladım ve yeni PropType tanımları eklemedim. Şimdiye kadar, bunun iyi bir yol olduğunu düşünüyorum, çünkü yukarıda da belirtildiği gibi, sadece props yazmanıza değil, kodunuzun diğer kısımlarını da yazmanıza izin veriyor. Bu, örneğin, kullanıcı tarafından değiştirilebilen, eyalette sahne donanımınızın bir kopyasına sahip olduğunuzda, gerçekten kullanışlıdır. Ayrıca, IDE'lerde otomatik tamamlama harika bir kazançtır.

Bir veya diğer yöndeki otomatik dönüştürücüler gerçekten kalkmadı. Bu nedenle, yeni projeler için, şimdi gerçekten PropTypes üzerinden Flow kullanmanızı tavsiye ederim (yazmayı iki kez yapmak istemiyorsanız).

Her ikisinin de çok geniş tip kontrol alanına ait olması dışında, ikisi arasında pek benzerlik yoktur.

Flow, dilin bir üst kümesini kullanan ve tüm kodunuza tür ek açıklamaları eklemenize olanak tanıyan statik bir analiz aracıdır . ve derleme zamanında tüm bir hata sınıfını yakalamanıza .

PropTypes, React'e eklenmiş temel bir tür denetleyicidir. Belirli bir bileşene aktarılan sahne türlerinden başka hiçbir şeyi kontrol edemez.

Tüm projeniz için daha esnek yazım denetimi istiyorsanız, Flow / TypeScript uygun seçeneklerdir. Bileşenlere yalnızca açıklamalı türleri geçirdiğiniz sürece, PropTypes'e ihtiyacınız olmayacak.

Sadece pervane türlerini kontrol etmek istiyorsanız, kod tabanınızın geri kalanını fazla karmaşık hale getirmeyin ve daha basit seçeneği tercih edin.

Burada cevapsız nokta olduğunu düşünüyoruz Akış bir olan statik denetleyicisi ise PropTypes bir olan çalışma zamanı denetleyicisi , araçlar

• Akış , kodlama sırasında yukarı akıştaki hataları yakalayabilir: Teorik olarak bilmeyeceğiniz bazı hataları gözden kaçırabilir (örneğin, projenizde akışı yeterince uygulamadıysanız veya derin iç içe nesneler olması durumunda)
• PropTypes onları test sırasında yakalar, böylece asla kaçırmaz

Yalnızca Flow kullanarak sahne türlerini bildirmeyi deneyin. Dize yerine sayı gibi yanlış bir tür belirtin. Bunun, Akışa duyarlı düzenleyicinizdeki bileşeni kullanan kodda işaretleneceğini göreceksiniz. Ancak bu, herhangi bir testin başarısız olmasına neden olmaz ve uygulamanız çalışmaya devam eder.

Şimdi yanlış bir türle React PropTypes kullanımını ekleyin. Bu, uygulama çalıştırıldığında testlerin başarısız olmasına ve tarayıcı konsolunda işaretlenmesine neden OLACAKTIR.

Buna dayanarak, Flow kullanılsa bile PropTypes'in de belirtilmesi gerektiği görülmektedir.