Αντίδραση Καταστάσεων στο React

Ας δούμε τώρα πώς λειτουργεί η αντίδραση. Κάνει έτσι ώστε όταν αλλάζει μια κατάσταση, οι αλλαγές αμέσως να εμφανίζονται στην οθόνη.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια κατάσταση με το όνομα ενός προϊόντος:

jsxconst [name, setName] = useState('prod');

Ας εμφανίσουμε το όνομα του προϊόντος στο markup:

jsxreturn <div>
  <span>{name}</span>
</div>;

Ας φτιάξουμε τώρα ένα κουμπί, upon clicking στο οποίο η κατάστασή μας θα αλλάζει:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

Στο χειριστή κλικ χρησιμοποιούμε τη συνάρτηση setName, για να ορίσουμε στο προϊόν ένα νέο όνομα:

jsxfunction clickHandler() {
  setName('xxxx');
}

Ας συγκεντρώσουμε όλο τον κώδικά μας μαζί. Θα προκύψει ότι μετά από πάτημα στο κουμπί το κείμενο αμέσως θα αλλάξει στη νέα τιμή:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

Η χρήση ξεχωριστών συναρτήσεων-χειριστών δεν είναι υποχρεωτική. Μπορείτε να χρησιμοποιήσετε μια ανώνυμη συνάρτηση βέλους:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}