ReactJS - Componenti di ordine superiore
I componenti di ordine superiore sono funzioni JavaScript utilizzate per aggiungere funzionalità aggiuntive al componente esistente. Queste funzioni sonopure, il che significa che stanno ricevendo dati e restituendo valori in base a tali dati. Se i dati cambiano, le funzioni di ordine superiore vengono rieseguite con input di dati diversi. Se vogliamo aggiornare il nostro componente di ritorno, non dobbiamo cambiare l'HOC. Tutto ciò che dobbiamo fare è modificare i dati che la nostra funzione sta utilizzando.
Higher Order Component(HOC) avvolge il componente "normale" e fornisce input di dati aggiuntivi. In realtà è una funzione che accetta un componente e restituisce un altro componente che avvolge quello originale.
Diamo un'occhiata a un semplice esempio per capire facilmente come funziona questo concetto. IlMyHOC è una funzione di ordine superiore che viene utilizzata solo per passare i dati a MyComponent. Questa funzione richiedeMyComponent, lo valorizza con newData e restituisce il componente avanzato che verrà renderizzato sullo schermo.
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);
Se eseguiamo l'app, vedremo che i dati vengono passati a MyComponent.
Note- I componenti di ordine superiore possono essere utilizzati per diverse funzionalità. Queste funzioni pure sono l'essenza della programmazione funzionale. Una volta che ci sarai abituato, noterai come la tua app stia diventando più facile da mantenere o aggiornare.