Mwongozo wa useState katika React

Bar ya nywila yako inabadilika kutoka dhaifu kwenda imara unapoandika. React hukumbuka unachochapa kupitia state.

State huhifadhi data. Inafuatilia unachochapa au unachobonyeza.

Fikiria unachapa jina lako.

  • State yako ya kuanzia ni herufi tupu (empty string).
  • Unachapa J.
  • Unaita function ili kusasisha state kutoka "" hadi "J".
  • Unachapa o.
  • Unaita function hiyo kubadilisha state kuwa "Jo".

Kila unaposasisha state, React inafanya re-render ya UI. Re-rendering inamaanisha React inafuta muonekano wa zamani na kuchora mpya ukiwa na data yako iliyosasishwa.

Kwa nini usitumie variable za kawaida? Variable ya kawaida inabadilika kwenye kodi yako lakini haisasishi skrini. Watumiaji wako wataona data ya zamani. React state inatatua hili kwa kuunganisha data yako na UI yako.

Jinsi ya kutumia useState:

  1. Import kutoka React. import { useState } from 'react';

  2. Itangaze. const [age, setAge] = useState(20);

Katika mfano huu:

  • age ni thamani yako ya sasa.
  • setAge ni function ya kubadilisha thamani.
  • 20 ni thamani yako ya kuanzia.

Jaribu hili sasa. Fungua mradi wa React. Tengeneza counter. Bonyeza kitufe ili kusasisha idadi. Tazama skrini ikibadilika papo hapo.

Chanzo: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i