Všetky komponenty Reactu môžu mať a štát s nimi spojené. Stav komponentu sa môže zmeniť buď v dôsledku odozvy na akciu vykonanú používateľom alebo udalosti spustenej systémom. Vždy, keď sa stav zmení, React znova vykreslí komponent do prehliadača. Pred aktualizáciou hodnoty stavu musíme vytvoriť počiatočné nastavenie stavu. Keď s tým skončíme, použijeme metóda setState(). zmeniť objekt stavu. Zabezpečuje, že komponent bol aktualizovaný a požaduje opätovné vykreslenie komponentu.
Obsah
- Reagovať JS setState
- Kroky na vytvorenie aplikácie React:
- Aktualizácia viacerých atribútov
- Aktualizácia hodnôt stavu pomocou rekvizít.
- Aktualizácia stavu pomocou predchádzajúcej hodnoty.
Reagovať JS setState
setState je asynchrónne volanie znamená, že ak sa zavolá synchrónne volanie, nemusí sa aktualizovať v správnom čase, napríklad ak chcete poznať aktuálnu hodnotu objektu po aktualizácii pomocou setState, nemusí poskytnúť aktuálnu aktualizovanú hodnotu na konzole. Ak chcete získať nejaké synchrónne správanie, musíte namiesto objektu odovzdať funkciu setState.
Syntax:
Môžeme použiť setState() na zmenu stavu komponentu priamo, ako aj prostredníctvom funkcie šípky.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Kroky na vytvorenie aplikácie React:
Krok 1: Vytvorte aplikáciu React pomocou nasledujúceho príkazu:
iskrový tutoriál
npx create-react-app foldername>
Krok 2: Po vytvorení priečinka projektu, t. j. názov priečinka, sa doň presuňte pomocou nasledujúceho príkazu:
cd foldername>
Štruktúra projektu:
Prístup 1: Aktualizuje sa jeden atribút
Vo vnútri nastavíme našu počiatočnú hodnotu stavu funkcia konštruktora a vytvorte ďalšiu funkciu updateState() na aktualizáciu stavu. Teraz, keď klikneme na tlačidlo, toto tlačidlo sa spustí ako udalosť onClick čím sa mení hodnota stavu. Metódu setState() vykonávame v našom funkcia updateState(). písaním:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Ako môžete vidieť, odovzdávame objekt funkcii setState(). Tento objekt obsahuje časť stavu, ktorú chceme aktualizovať, čo je v tomto prípade hodnota pozdrav . React prevezme túto hodnotu a zlúči ju do objektu, ktorý ju potrebuje. Je to ako keby sa komponent tlačidla spýtal, čo by mal použiť na aktualizáciu hodnoty pozdravu, a setState() odpovie odpoveďou.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >greeting:> >'Click the button to receive greetings'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >greeting:>'GeeksForGeeks welcomes you !!'>,> >});> >}> >render() {> >return> (> >> >Greetings Portal> >>
hibernovať dialekt >{>/* Set click handler */>}> > this.updateState}>Klikni na mňa! ); } } exportovať predvolenú aplikáciu;> |
>
>
Krok na spustenie aplikácie: Spustite aplikáciu pomocou nasledujúceho príkazu z koreňového adresára projektu:
npm start>
Výkon: Teraz otvorte prehliadač a prejdite na http://localhost:3000/ , uvidíte nasledujúci výstup:
Prístup 2: Aktualizácia viacerých atribútov
Stavový objekt komponentu môže obsahovať viacero atribútov a React umožňuje pomocou funkcie setState() aktualizovať iba podmnožinu týchto atribútov, ako aj pomocou viacerých metód setState() aktualizovať každú hodnotu atribútu nezávisle.
Náš počiatočný stav nastavíme inicializáciou troch rôznych atribútov a potom vytvoríme funkciu updateState() ktorý aktualizuje svoju hodnotu vždy, keď je zavolaný. Táto funkcia sa opäť spustí ako udalosť onClick a zároveň získame aktualizované hodnoty našich stavov.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >test:>'Nil'>,> >questions:>'0'>,> >students:>'0'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >test:>'Programming Quiz'>,> >questions:>'10'>,> >students:>'30'>,> >});> >}> >render() {> >return> (> >> >Test Portal> >>
>>
>>
>{>/* Set click handler */>}> > this.updateState}>Klikni na mňa! ); } } exportovať predvolenú aplikáciu;> |
>
>
Krok na spustenie aplikácie: Spustite aplikáciu pomocou nasledujúceho príkazu z koreňového adresára projektu:
npm start>
Výkon: Teraz otvorte prehliadač a prejdite na http://localhost:3000/ , uvidíte nasledujúci výstup:
Prístup 3: Aktualizácia hodnôt stavu pomocou rekvizít.
Nastavili sme pole reťazcov testTémy ako rekvizity pre náš komponent. Funkcia zoznam tém je vytvorený na mapovanie všetkých reťazcov ako položiek zoznamu v našom štáte témy . Funkcia updateState spustí sa a nastaví témy na zoznam položiek. Keď klikneme na tlačidlo, dostaneme aktualizované hodnoty stavu. Táto metóda je známa tým, že spracováva zložité dáta a veľmi jednoducho aktualizuje stav.
čo je súborový systém linux
Javascript
linuxový súbor zmeny
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >static defaultProps = {> >testTopics: [> >'React JS'>,> >'Node JS'>,> >'Compound components'>,> >'Lifecycle Methods'>,> >'Event Handlers'>,> >'Router'>,> >'React Hooks'>,> >'Redux'>,> >'Context'>,> >],> >};> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >testName:>'React js Test'>,> >topics:>''>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >listOfTopics() {> >return> (> >>> >{>this>.props.testTopics.map((topic) =>(> >{topic}> >))}> >>>);> >}> >updateState() {> >// Changing state> >this>.setState({> >testName:>'Test topics are:'>,> >topics:>this>.listOfTopics(),> >});> >}> >render() {> >return> (> >> >Test Information> >>
>>
>{>/* Set click handler */>}> > this.updateState}>Klikni na mňa! ); } } exportovať predvolenú aplikáciu;> |
>
>
Krok na spustenie aplikácie: Spustite aplikáciu pomocou nasledujúceho príkazu z koreňového adresára projektu:
npm start>
Výkon: Teraz otvorte prehliadač a prejdite na http://localhost:3000/ , uvidíte nasledujúci výstup:
Prístup 4: Aktualizácia stavu pomocou predchádzajúcej hodnoty.
Vytvárame počiatočný stav počítať s hodnotou 0. Funkcia updateState() zvyšuje súčasnú hodnotu stavu o 1 vždy, keď je zavolaný. Tentoraz použijeme metódu setState() vo funkcii šípky prechodom prevState ako parameter. K aktuálnej hodnote stavu sa pristupuje pomocou prevState.stateName ktorý sa zvýši o 1 vždy, keď stlačíme tlačidlo. Táto metóda je naozaj užitočná, keď nastavujeme hodnotu v stave tak, že závisí od jej predchádzajúcej hodnoty. Napríklad , prepínanie boolovskej hodnoty (pravda/nepravda) alebo zvyšovanie/znižovanie čísla.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >count: 0,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState((prevState) =>{> >return> { count: prevState.count + 1 };> >});> >}> >render() {> >return> (> >> >Click Counter> >>
>{>/* Set click handler */>}> > this.updateState}>Klikni na mňa! ); } } exportovať predvolenú aplikáciu;> |
t ff
>
>
Krok na spustenie aplikácie: Spustite aplikáciu pomocou nasledujúceho príkazu z koreňového adresára projektu:
npm start>
Výkon: Teraz otvorte prehliadač a prejdite na http://localhost:3000/ , uvidíte nasledujúci výstup:
