I decoratori sono una funzionalità del linguaggio JavaScript, che consente di aggiungere funzionalità aggiuntive a classi e metodi all’interno delle classi. Si tratta di funzioni che possono essere usate per estendere il comportamento delle classi e dei metodi senza cambiarne il codice sorgente.
A partire da Babel 7, i decoratori sono disabilitati di default. Per utilizzarli, è necessario aggiungere il seguente codice al file .babelrc:
```
{
“plugins”: [
[“@babel/plugin-proposal-decorators”, { “legacy”: true }],
[“@babel/plugin-proposal-class-properties”, { “loose” : true }]
]
}
```
Ecco un esempio di come si potrebbe usare un decoratore in React:
```
function logProps(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log(this.props);
}
@logProps
class MyComponent extends React.Component {
// …
}
```
In questo esempio, `logProps` è un decoratore che accetta un componente e restituisce un nuovo componente che effettua il log delle prop prima di renderizzare il componente originale.
Ricordati, tuttavia, che l’uso di decoratori in React non è ancora ufficialmente supportato ed è considerato sperimentale. Most of the community prefer to use higher-order components (HOCs) or hooks for reusable logic instead of decorators. Se stai appena iniziando con React, ti consiglierei di evitare l’uso di decoratori fino a quando non diventano una funzionalità più stabile.
