In React, i riferimenti (conosciuti come “refs”) vengono utilizzati per accedere direttamente a un nodo DOM o a un’istanza di un componente. In termini semplici, “ref” è un metodo per ottenere il controllo o l’accesso diretto a un elemento o a un componente specifico.
I riferimenti possono essere usati in una serie di circostanze, come per esempio:
- Gestire il focus, la selezione di testo o i media.
- Avviare animazioni.
- Integrare con librerie DOM non React.
- Attivare il rendering imperativo.
Nonostante la loro utilità, gli sviluppatori React sono incoraggiati a utilizzare refs solo come ultima risorsa, in quanto il loro uso può andare contro alcuni dei concetti fondamentali di React, come il flusso dei dati dal componente genitore ai componenti figli.
Per creare e assegnare un riferimento, è possibile utilizzare `React.createRef()` e allegarlo a elementi React tramite l’attributo `ref`. L’attributo `ref` accetta una funzione di callback in cui è possibile accedere all’elemento o al componente associato attraverso il suo argomento.
Ecco un esempio di come i riferimenti possono essere usati in un componente di classe:
```
class MyComponent extends React.Component {
myRef = React.createRef();
Nell’esempio, `myRef` è creato usando `React.createRef()` nel costruttore e poi associato a un elemento `div` nell’output di rendering. All’interno di `componentDidMount()`, è quindi possibile accedere all’elemento `div` tramite `this.myRef.current`.
Per le funzioni di componente, React fornisce l’hook `useRef` che può essere utilizzato allo stesso modo.
