Milleks kasutatakse useState direktiivi?

useState on Reacti hook, mis võimaldab lisada oleku funktsionaalsetesse komponentidesse. See tagastab massiivi kahe elemendiga: praeguse oleku väärtuse ja funktsiooni selle uuendamiseks. Kui uuendusfunktsiooni kutsutakse, renderdatakse komponent uuesti uue väärtusega.

Kasutusnäide:

import { useState } from 'react';

function Counter() {
  // 'count' on praegune olek, 'setCount' on funktsioon selle uuendamiseks
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Loendur: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Suurenda
      </button>
    </div>
  );
}

Peamised omadused:

• Lisab oleku: võimaldab kasutada olekut funktsionaalsetes komponentides, mis varem olid saadaval ainult klassides.
• Uuendamise funktsioon: tagastab spetsiaalse funktsiooni oleku muutmiseks.
• Uuesti renderdamine: oleku muutmine uuendusfunktsiooni kaudu põhjustab komponendi uuesti renderdamise.
• Primitivid ja objektid: võib salvestada mis tahes andmetüüpi: numbrid, stringid, booleanid, objektid, massiivid.
• Hiliselt initsialiseerimine: algväärtus võib olla funktsioon, mis täidetakse ainult esimesel renderdamisel, kasulik kallite arvutuste jaoks.

const [data, setData] = useState(() => {
  // Kallid arvutused täidetakse ainult üks kord
  const initialData = someExpensiveCalculation();
  return initialData;
});