Būsenų reaktyvumas React

Dabar pažiūrėkime, kaip veikia reaktyvumas. Jis užtikrina, kad pakeitus būseną, pakeitimai akimirksniu atsispindi ekrane.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime būseną su produkto pavadinimu:

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

Atvaizduokime produkto pavadinimą išoriniame puslapio dizaine:

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

Dabar sukurkime mygtuką, kurį paspaudus mūsų būsena pasikeis:

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

Paspaudimo apdoroklyje naudokime funkciją setName, kad nustatytume produktui naują pavadinimą:

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

Sujungkime visą mūsų kodą kartu. Pasirodo, kad po mygtuko paspaudimo tekstas akimirksniu pasikeis į naują reikšmę:

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

Atskirų apdorojimo funkcijų naudojimas nėra privalomas. Galima naudoti anoniminę rodyklinę funkciją:

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