Bir süredir React ile çalışıyorsanız, muhtemelen konteyner ve sunum bileşenleri veya akıllı ve aptal bileşenler. Bu terimler bir model bu, React bileşenlerinin UI katmanını mantıktan ayırır.
Kullanıcı arabirimini iş mantığından ayırmak, React'e özgü bir şey değildir: endişelerin ayrılması, bir tasarım ilkesidir. zaten 70'lerde. Örneğin, veritabanına erişen kodu arka uçtaki iş mantığından ayırmak yaygın bir uygulamadır.
Bu yüzden React'te, tüm mantığı içeren kapsayıcı bileşenleri oluşturarak bu sorunu çözdük, bu da daha sonra verileri aksesuarlar aracılığıyla sunum bileşenine aktaracaktı.
React kancalarının kullanıma sunulmasıyla, buna yeni bir yaklaşım geldi: özel kancalar.
Neden mantığı bileşenden ayırmalıyız?
Mantığı React bileşenlerimizden ayırmaya başlamadan önce nedenini bilmeliyiz.
Kodumuzu, her işlevin veya bileşenin yalnızca bir şeyden sorumlu olduğu şekilde düzenlemek, çok fazla olması avantajına sahiptir. değiştirilmesi ve bakımı daha kolay (Dave ve Andrew buna “ortogonalitenin” kitabında Pragmatik Programcı).
Bunu React'e uygulamak, bileşenimizin daha temiz ve düzenli görüneceği anlamına gelir. Örneğin, kullanıcı arayüzünü düzenlemeden önce mantık duvarını kaydırmamız gerekmeyecek.
Kodunuzu bu şekilde düzenlemek, yalnızca daha iyi görünmesini ve gezinmesini kolaylaştırmakla kalmaz, aynı zamanda kancayı değiştirmek kullanıcı arayüzünü etkilemediğinden değiştirmeyi de kolaylaştırır ve bunun tersi de geçerlidir.
Test etme de daha erişilebilir: İstersek mantığı kullanıcı arayüzünden ayrı olarak test edebiliriz. Ancak benim için en önemli avantaj, bu yaklaşımın kodumu nasıl düzenlediğidir.
React kancalarıyla mantık nasıl ayrıştırılır
Mantığı bileşenimizden ayırmak için önce özel bir kanca oluşturacağız.
Bu bileşeni örnek olarak alalım. Temel sayının ve üssün üstel değerini hesaplar:
Tam kaynak kodunu bulabilirsiniz okuyun.
Kod aşağıdaki gibi görünür:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Bu zaten iyi görünebilir, ancak bu eğitimin hatırına, sadece resim burada daha fazla mantık olduğunu.
İlk adım olarak, yapacağımız mantığı özel bir kancaya taşı ve onu bileşenimizin içinde çağırın.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Bu kancayı bir ayrı dosya endişelerin daha belirgin bir şekilde ayrılması için.
Ek olarak, kancamızı daha küçük, yeniden kullanılabilir işlevlere ayırabiliriz. Bu durumda sadece çıkarabiliriz. calculateExponent.
Üs Hesap Makinesi.js'yi kullanın
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Bu işlevleri test etmek, ilk örnekteki tüm bileşenin kodunu test etmekten çok daha kolaydır. Bunları, React bileşenlerini desteklemesi gerekmeyen herhangi bir Node.js test kitaplığı ile test edebiliriz.
Artık bileşen ve kanca kodunda çerçeveye özel kodumuz (React) var, iş mantığımız ise daha sonra tanımladığımız (çerçeveden bağımsız olan) farklı işlevlerde yaşıyor.
En iyi uygulamalar
Adlandırma
Özel kancalarımı bileşenden sonra bir bitiştirme olarak adlandırmayı seviyorum use ve bileşenin adı (örn. useExponentCalculator). sonra ararım aynısını dosyala kanca olarak.
Farklı bir adlandırma kuralına uymak isteyebilirsiniz, ancak tavsiye ederim tutarlı kalmak projenizde.
Özel bir kancanın parçalarını yeniden kullanabilirsem, genellikle onu altındaki başka bir dosyaya taşırım. src/hooks.
Aşırıya kaçma
Pragmatik olmaya çalışın. Bir bileşenin yalnızca birkaç JS satırı varsa, mantığı ayırmak gerekli değildir.
JS içinde CSS
JS içinde CSS kitaplığı kullanıyorsanız (useStyles), bu kodu başka bir dosyaya da taşımak isteyebilirsiniz.
Kanca ile aynı dosyaya taşıyabilirsiniz. Ancak, aynı dosyadaki bileşenin üzerinde tutmayı veya çok büyürse kendi dosyasına taşımayı tercih ederim.
Sonuç
Özel kancalar kullanmanın kodunuzu iyileştirdiğini düşünseniz de düşünmeseniz de, sonuçta kişisel tercihinize bağlıdır. Kod tabanınız çok fazla mantık içermiyorsa, bu kalıbın avantajları sizin için çok alakalı olmayacaktır.
Özel kancalar, modülerliği artırmanın yalnızca bir yoludur; ben de şiddetle tavsiye ederim bileşenleri ve işlevleri daha küçük, yeniden kullanılabilir parçalara bölmek mümkün olunca.
Konu ayrıca daha genel bir düzeyde tartışılmaktadır. Pragmatik Programcı. Kitabın en sevdiğim konularını içeren bir makale yazdım, bu yüzden ilginizi çekiyorsa, emin olun. kontrol et.
