ReactJS - Yüksek Dereceli Bileşenler
Daha yüksek sıralı bileşenler, mevcut bileşene ek işlevler eklemek için kullanılan JavaScript işlevleridir. Bu işlevlerpureyani veri alıyorlar ve bu verilere göre değerler döndürüyorlar. Veri değişirse, daha yüksek dereceli fonksiyonlar farklı veri girişi ile yeniden çalıştırılır. Geri dönen bileşenimizi güncellemek istiyorsak, HOC'yi değiştirmemiz gerekmez. Tek yapmamız gereken, fonksiyonumuzun kullandığı verileri değiştirmek.
Higher Order Component(HOC) "normal" bileşenin etrafına sarılıyor ve ek veri girişi sağlıyor. Aslında, bir bileşeni alan ve orijinal olanı saran başka bir bileşeni döndüren bir işlevdir.
Bu kavramın nasıl çalıştığını kolayca anlamak için basit bir örneğe bakalım. MyHOC yalnızca veri aktarmak için kullanılan daha yüksek dereceli bir işlevdir MyComponent. Bu işlev alırMyComponentile geliştirir newData ve ekranda oluşturulacak gelişmiş bileşeni döndürür.
import React from 'react';
var newData = {
data: 'Data from HOC...',
}
var MyHOC = ComposedComponent => class extends React.Component {
componentDidMount() {
this.setState({
data: newData.data
});
}
render() {
return <ComposedComponent {...this.props} {...this.state} />;
}
};
class MyComponent extends React.Component {
render() {
return (
<div>
<h1>{this.props.data}</h1>
</div>
)
}
}
export default MyHOC(MyComponent);
Uygulamayı çalıştırırsak verilerin aktarıldığını göreceğiz. MyComponent.
Note- Farklı işlevler için daha yüksek dereceli bileşenler kullanılabilir. Bu saf fonksiyonlar, fonksiyonel programlamanın özüdür. Buna alıştığınızda, uygulamanızın bakımının veya yükseltmesinin nasıl daha kolay hale geldiğini fark edeceksiniz.