ReactJS - Modalità Rigida: Una Guida per Principianti

Ciao, futuri sviluppatori React! Oggi esploreremo una funzione importante ma spesso trascurata di React: la Modalità Rigida (Strict Mode). Non preoccupatevi se siete nuovi alla programmazione - vi guiderò attraverso questo concetto passo per passo, proprio come ho fatto per centinaia di studenti negli anni della mia insegnanza. Allora, prendete una tazza di caffè (o tè, se è la vostra bevanda preferita) e partiamo insieme in questa avventura di apprendimento!

Cos'è la Modalità Rigida?

Prima di addentrarci nei dettagli, capiremo cos'è la Modalità Rigida in React. Immaginate di imparare a guidare. La Modalità Rigida è come avere un insegnante di guida molto scrupoloso seduto accanto a voi, che segnala ogni piccolo errore che commettete. Non è lì per rimproverarvi, ma per aiutarvi a diventare un migliore guidatore - o, nel nostro caso, un migliore sviluppatore React.

La Modalità Rigida è uno strumento per evidenziare potenziali problemi nella vostra applicazione. Attiva ulteriori controlli e avvisi per i suoi discendenti. Vediamo come utilizzarlo:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

In questo esempio, stiamo avvolgendo l'intero componente App con React.StrictMode. Questo significa che tutti i componenti all'interno di App saranno sottoposti a questi controlli aggiuntivi.

Ora, esploriamo cosa controlla effettivamente la Modalità Rigida.

Uso non sicuro delle Fasi di Vita

Cos'è una Fase di Vita?

Prima di parlare delle fasi di vita non sicure, capiremo cos'è una fase di vita. In React, i componenti passano attraverso una serie di stadi dalla nascita (montaggio) alla morte (smontaggio). Questi stadi sono chiamati fasi di vita.

Fasi di Vita non Sicure

Alcuni metodi di fase di vita sono considerati non sicuri perché possono portare a bug nella rendering asincrono. La Modalità Rigida aiuta a identificare il loro utilizzo. Ecco un esempio:

class OldComponent extends React.Component {
componentWillMount() {
console.log("Questo metodo non è sicuro!");
}

render() {
return <div>Ciao, sono un vecchio componente!</div>;
}
}

Se utilizzate questo componente in Modalità Rigida, vedrete un avviso nella console sull'uso del metodo non sicuro componentWillMount.

Invece, dovreste utilizzare alternative più sicure. Ecco una tabella dei metodi non sicuri e delle loro alternative sicure:

Metodo non sicuro	Alternativa sicura
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Uso dell'API Ref Legacy

Cos'è un Ref?

I ref forniscono un modo per accedere ai nodi DOM o agli elementi React creati nel metodo di rendering. Sono come una linea diretta a una parte specifica della vostra UI.

Ref Stringa (Legacy)

In passato, i ref erano creati utilizzando stringhe, come questa:

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Clicca qui!</button>;
}
}

Questo metodo è considerato legacy e può causare problemi. La Modalità Rigida vi avviserà se utilizzate ref stringa.

Uso Moderno dei Ref

Invece, dovreste utilizzare l'API createRef o l'hook useRef:

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

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

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

In questo esempio, stiamo utilizzando React.createRef() per creare un ref, che è molto più sicuro ed efficiente.

Uso Legacy di findDOMNode

Cos'è findDOMNode?

findDOMNode era un metodo utilizzato per cercare l'albero DOM per un'istanza specifica di componente React. Tuttavia, è ora deprecato a causa dei potenziali problemi che può causare.

Esempio di Uso di findDOMNode

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>Diventerò rosso!</div>;
}
}

Questo codice cambierà il colore di sfondo del div in rosso. Tuttavia, utilizzare findDOMNode in questo modo è sconsigliato, e la Modalità Rigida vi avviserà.

Alternativa Moderna

Invece di findDOMNode, dovreste utilizzare i ref:

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

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>Diventerò blu!</div>;
}
}

Questo ottenere lo stesso risultato ma in un modo più sicuro e più amichevole per React.

Conclusione

Eccoci arrivati, ragazzi! Abbiamo viaggiato attraverso il regno della Modalità Rigida di React, esplorando i suoi avvisi sugli usi non sicuri delle fasi di vita, l'uso legacy dei ref e il metodo deprecato findDOMNode. Ricordate, la Modalità Rigida è il vostro strumento di sviluppo React amichevole, sempre lì per aiutarvi a scrivere codice migliore e più sicuro.

Mentre ci prepariamo a concludere, mi viene in mente una frase di uno studente che mi disse una volta: "React è come un genitore rigoroso ma premuroso - stabilisce regole per mantenerci al sicuro, ma ci dà anche la libertà di creare cose straordinarie." Non potrei essere più d'accordo!

Continuate a praticare, continuate ad apprendere e, soprattutto, continuate a programmare. Fino alla prossima volta, felice programmazione con React!

Credits: Image by storyset