ReactJS - Refs e il DOM

Ciao, futuri sviluppatori React! Oggi esploreremo un argomento entusiasmante che vi aiuterà a interagire direttamente con gli elementi del DOM nelle vostre applicazioni React. Prendete il volo, perché stiamo per esplorare il mondo dei Refs e del DOM!

Cos'è un Ref?

Prima di immergerci nei dettagli, capiremo cosa sono i Refs. In React, "Ref" è l'abbreviazione di "reference". È come dare un'etichetta a un elemento specifico così da poterlo trovare facilmente più tardi. Immagina di essere a una grande festa e di voler tenere traccia del tuo miglior amico. Potresti dargli un cappello speciale o un'etichetta unica. Questo è essenzialmente ciò che fa un Ref in React - ti aiuta a tenere traccia di elementi specifici.

Perché abbiamo bisogno di Refs?

Potresti chiederti, "Perché non possiamo semplicemente usare JavaScript tradizionale per selezionare gli elementi?" Beh, in React, cerchiamo di evitare di manipolare direttamente il DOM (Document Object Model) perché React ha il proprio modo efficiente di aggiornare l'UI. Tuttavia, ci sono momenti in cui dobbiamo uscire dal paradigma dichiarativo di React e lavorare direttamente con gli elementi del DOM. Ecco dove entrano in gioco i Refs!

Creare Refs con createRef()

Iniziamo vedendo come creare un Ref in React. Usiamo un metodo chiamato createRef().

Firma del metodo createRef

La firma di createRef() è abbastanza semplice:

React.createRef()

Questo è tutto! Nessun parametro, nessuna complicazione. Restituisce un oggetto semplice con una sola proprietà: current. Inizialmente, questa proprietà current è impostata su null.

Vediamo un esempio:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}

render() {
return <div ref={this.myRef} />;
}
}

In questo esempio, creiamo un Ref nel costruttore e lo assegniamo a this.myRef. Poi, nel metodo render, associamo questo Ref a un elemento div utilizzando l'attributo ref.

Applicare un Ref

Ora che abbiamo creato il nostro Ref, vediamo come possiamo usarlo. Ci sono diversi modi per applicare un Ref:

1. Refs sugli elementi del DOM

L'uso più comune è applicare un Ref a un elemento del DOM:

class AutoFocusInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

componentDidMount() {
this.inputRef.current.focus();
}

render() {
return <input ref={this.inputRef} />;
}
}

In questo esempio, creiamo un Ref per un elemento input. Dopo che il componente è montato, usiamo il Ref per automatizzare il focus sull'input. La proprietà current del Ref ci dà accesso al vero nodo del DOM.

2. Refs sui componenti di classe

Puoi anche usare i Refs con i componenti di classe:

class AutoScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}

componentDidUpdate() {
const node = this.listRef.current;
node.scrollToItem(0);
}

render() {
return <MyListComponent ref={this.listRef} />;
}
}

In questo caso, this.listRef.current punterà all'istanza della classe MyListComponent.

3. Refs e componenti funzionali

I componenti funzionali non possono ricevere Refs direttamente, ma puoi usare la funzione forwardRef per passare i Refs:

const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.buttonRef = React.createRef();
}

render() {
return <FancyButton ref={this.buttonRef}>Clicca qui!</FancyButton>;
}
}

In questo esempio, FancyButton usa forwardRef per passare il Ref al vero elemento del bottone.

Casi d'uso di createRef

Ora che sappiamo come creare e applicare i Refs, esploriamo alcuni casi d'uso comuni:

1. Gestire il focus, la selezione del testo o la riproduzione dei media

class TextInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

focusTextInput = () => {
this.inputRef.current.focus();
}

render() {
return (
<div>
<input type="text" ref={this.inputRef} />
<button onClick={this.focusTextInput}>Focus sull'input</button>
</div>
);
}
}

Questo componente ci permette di focusare automaticamente l'input quando viene cliccato il pulsante.

2. Avviare animazioni imperative

class Animator extends React.Component {
constructor(props) {
super(props);
this.elementRef = React.createRef();
}

animate = () => {
this.elementRef.current.classList.add('animated');
}

render() {
return (
<div>
<div ref={this.elementRef}>Animami!</div>
<button onClick={this.animate}>Inizia Animazione</button>
</div>
);
}
}

Qui, usiamo un Ref per aggiungere una classe CSS a un elemento, avviando un'animazione.

3. Integrare con librerie di DOM di terze parti

class MapComponent extends React.Component {
constructor(props) {
super(props);
this.mapRef = React.createRef();
}

componentDidMount() {
const mapLibrary = new FancyMapLibrary();
mapLibrary.createMap(this.mapRef.current);
}

render() {
return <div ref={this.mapRef} style={{width: '100%', height: '400px'}} />;
}
}

In questo esempio, usiamo un Ref per dare una libreria di mappe di terze parti accesso a un nodo del DOM dove può disegnare una mappa.

Conclusione

I Refs sono uno strumento potente in React che ci permette di uscire dal paradigma dichiarativo quando necessario. Forniscono un modo per accedere direttamente ai nodi del DOM o agli elementi React. Tuttavia, è importante usare i Refs con saggezza. Nella maggior parte dei casi, puoi ottenere ciò di cui hai bisogno attraverso le API dichiarative di React. Ma quando hai bisogno di quel pezzo extra di controllo, i Refs sono lì per aiutarti!

Ricorda, con grande potere viene grande responsabilità. Usa i Refs saggiamente, e le tue applicazioni React ti ringrazieranno!

Ecco una tabella di riepilogo dei metodi che abbiamo discusso:

Metodo	Descrizione	Esempio
React.createRef()	Crea un oggetto ref	this.myRef = React.createRef();
ref attribute	Associa un ref a un elemento React	<div ref={this.myRef} />
forwardRef	Permette ai componenti funzionali di ricevere refs	const FancyButton = React.forwardRef((props, ref) => ...)

Buon coding, e possa i tuoi Refs sempre essere attuali!

Credits: Image by storyset