Kam paredzēta useState direktīva?

useState ir React hooks, kas ļauj pievienot stāvokli funkcionālajās komponentēs. Tas atgriež masīvu ar diviem elementiem: pašreizējo stāvokļa vērtību un funkciju, lai to atjauninātu. Izsaucot atjaunināšanas funkciju, komponents tiek pārrenderēts ar jauno vērtību.

Piemērs lietošanai:

import { useState } from 'react';

function Counter() {
  // 'count' ir pašreizējais stāvoklis, 'setCount' — funkcija to atjaunināt
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Skaitītājs: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Palielināt
      </button>
    </div>
  );
}

Galvenās īpašības:

• Pievieno stāvokli: ļauj izmantot stāvokli funkcionālajās komponentēs, agrāk pieejams tikai klasēs.
• Atjaunināšanas funkcija: atgriež īpašu funkciju stāvokļa maiņai.
• Pārrenderēšana: Stāvokļa maiņa ar atjaunināšanas funkciju izraisa komponenta pārrenderēšanu.
• Primitīvi un objekti: var glabāt jebkāda veida datus: skaitļus, virknes, boolean, objektus, masīvus.
• Lazy inicializācija: Sākotnējā vērtība var būt funkcija, kas tiek izpildīta tikai pirmajā renderēšanā, kas ir noderīgi dārgiem aprēķiniem.

const [data, setData] = useState(() => {
  // Dārgi aprēķini tiek veikti tikai vienreiz
  const initialData = someExpensiveCalculation();
  return initialData;
});