Πείτε μας τις διαφορές μεταξύ ελεγχόμενων και ανεξέλεγκτων συστατικών στο React.

Τα ελεγχόμενα συστατικά διαχειρίζονται την κατάσταση τους μέσω του useState (ή this.state στις κλάσεις) και λαμβάνουν δεδομένα και συναρτήσεις callback μέσω των props. Η κατάσταση της φόρμας, για παράδειγμα, αποθηκεύεται στην κατάσταση του React και ενημερώνεται μέσω χειριστών onChange.

Τα ανεξέλεγκτα συστατικά αποθηκεύουν την κατάσταση τους μέσα στο DOM. Για πρόσβαση στην τιμή τους, χρησιμοποιείται το useRef (ή React.createRef στις κλάσεις) για να πάρει κανείς μια αναφορά στο στοιχείο DOM. Η τιμή των στοιχείων της φόρμας, για παράδειγμα, εξάγεται απευθείας από το DOM κατά την υποβολή.

Χαρακτηριστικό	Ελεγχόμενο συστατικό	Ανεξέλεγκτο συστατικό
Διαχείριση κατάστασης	Κατάσταση React (useState)	DOM
Πρόσβαση στην τιμή	Μέσω κατάστασης και props	Μέσω Refs (useRef)
Ενημέρωση	Αντιδραστικά, σε κάθε αλλαγή	Μόνο σε ρητή ενέργεια (π.χ., υποβολή)
Επικύρωση	Στη λογική του React	Μέσω του τυπικού HTML API ή χειροκίνητα μετά την απόκτηση της τιμής

Παράδειγμα ελεγχόμενου συστατικού:

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Παράδειγμα ανεξέλεγκτου συστατικού:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Τιμή input: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Λήψη τιμής</button>
    </>
  );
}

Η επιλογή μεταξύ τους εξαρτάται από τη δυσκολία της λογικής και την ανάγκη για άμεση αντίδραση στις αλλαγές εισόδου. Τα ελεγχόμενα συστατικά προτιμούνται για πολύπλοκες φόρμες και επικύρωση σε πραγματικό χρόνο. Τα ανεξέλεγκτα είναι κατάλληλα για απλές φόρμες ή για ενσωμάτωση με τρίτες βιβλιοθήκες DOM.