ReactJS - Componenti Non Gestiti

Ciao, aspiranti programmatori! Oggi esploreremo il mondo di ReactJS e approfondiremo un concetto chiamato "Componenti Non Gestiti." Non preoccupatevi se siete nuovi alla programmazione - vi guiderò passo dopo passo, proprio come ho fatto per centinaia di studenti negli anni. Allora, prendete una tazza della vostra bevanda preferita e partiamo insieme in questa avventura emozionante!

Cos'è un Componente Non Gestito?

Prima di addentrarci nei dettagli, cerchiamo di capire cos'è un componente non gestito in React. Immagina di compilare un modulo cartaceo - scrivi le tue informazioni e, quando hai finito, lo invii. Questo è fondamentalmente come funzionano i componenti non gestiti in React!

In React, un componente non gestito è un elemento di modulo che gestisce il proprio stato internamente, piuttosto che avere React che lo controlla. È come dare all'elemento del modulo una mente propria!

Programazione del Modulo in Componenti Non Gestiti

Ora, mettiamo le mani al lavoro e immergiamoci in qualche codice. Inizieremo con un esempio semplice per illustrare come funzionano i componenti non gestiti nella programmazione del modulo.

Input Non Gestito di Base

Ecco un esempio di input non gestito di base:

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Nome:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

In questo esempio, abbiamo un modulo semplice con un input di testo per il nome. Nota come non abbiamo alcun stato o handler onChange? Questo perché l'input sta gestendo il proprio stato internamente.

Accesso ai Valori dell'Input

Ma aspetta, potresti chiedere, "Come otteniamo il valore dell'input se React non lo sta gestendo?" Ottima domanda! Possiamo usare un ref per accedere direttamente al nodo DOM. Modifichiamo il nostro esempio:

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
alert('Un nome è stato inviato: ' + inputRef.current.value);
};

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Nome:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">Invia</button>
</form>
);
}

export default SimpleForm;

In questa versione aggiornata, stiamo usando l'hook useRef per creare un riferimento al nostro input. Quando il modulo viene inviato, possiamo accedere al valore dell'input usando inputRef.current.value.

Creazione di un Modulo Semplice

Ora che abbiamo capito le basi, creiamo un modulo più completo utilizzando i componenti non gestiti.

Modulo con Più Input

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Dati del modulo:', formData);
// Qui di solito invieresti i dati a un server
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Nome:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Messaggio:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Invia Messaggio</button>
</form>
);
}

export default ComplexForm;

In questo esempio, abbiamo creato un modulo con tre campi: nome, email e messaggio. Ogni campo ha il proprio ref, permettendoci di accedere al suo valore quando il modulo viene inviato.

Spiegazione

1. Creiamo refs per ogni input usando useRef.
2. Nella funzione handleSubmit, preveniamo il comportamento predefinito dell'invio del modulo e raccogliamo i valori da ogni input usando i loro refs.
3. Poi logghiamo i dati del modulo nella console (in una applicazione reale, invieresti questi dati a un server).

Vantaggi e Svantaggi dei Componenti Non Gestiti

Prendiamo un momento per discutere i vantaggi e gli svantaggi dell'uso dei componenti non gestiti:

Vantaggi	Svantaggi
Codice più semplice per moduli di base	Meno controllo sui valori del modulo
Può essere utile per integrare React con codice non-React	Più difficile implementare la validazione dinamica del modulo
Potenzialmente migliore prestazione per moduli molto grandi	Impossibile reimpostare i valori del modulo in modo programmatico
Funziona bene con input di file	Meno "React-like" - non segue il principio della fonte unica della verità

Quando Usare i Componenti Non Gestiti

I componenti non gestiti possono essere utili in determinati scenari:

1. Quando si integra con codice o librerie non-React
2. Per moduli semplici dove non è necessario una validazione in tempo reale o aggiornamenti dinamici
3. Quando si lavora con input di file (che sono inherentemente non gestiti)

Tuttavia, per la maggior parte delle applicazioni React, i componenti gestiti (dove React gestisce lo stato del modulo) sono generalmente preferiti poiché offrono più controllo e sono più allineati con la filosofia di React.

Conclusione

Eccoci, gente! Abbiamo intrapreso un viaggio attraverso il territorio dei componenti non gestiti in React. Ricorda, come scegliere tra una macchina manuale e una automatica, la scelta tra componenti gestiti e non gestiti dipende dalle tue esigenze specifiche.

Mentre chiudiamo, mi ricordo di uno studente che mi ha detto una volta, "React è come cucinare - a volte hai bisogno di misure precise, e altre volte puoi fare a occhio." I componenti non gestiti sono un po' come fare a occhio - hanno il loro posto, ma usali con saggezza!

Spero che questa guida abbia illuminato il sentiero dei componenti non gestiti per voi. Continuate a praticare, continuate a programmare e ricorda - nel mondo della programmazione, ogni errore è solo una pietra di paragone per il successo!

Buon coding, futuri maestri di React!

Credits: Image by storyset