Všechny komponenty Reactu mohou mít a Stát s nimi spojené. Stav komponenty se může změnit buď v důsledku odezvy na akci provedenou uživatelem nebo události spuštěné systémem. Kdykoli se stav změní, React znovu vykreslí komponentu do prohlížeče. Před aktualizací hodnoty stavu musíme vytvořit počáteční nastavení stavu. Jakmile s tím skončíme, použijeme metoda setState(). změnit objekt stavu. Zajistí, že komponenta byla aktualizována, a požaduje opětovné vykreslení komponenty.
Obsah
- Reagovat JS setState
- Kroky k vytvoření aplikace React:
- Aktualizace více atributů
- Aktualizace stavových hodnot pomocí rekvizit.
- Aktualizace stavu pomocí předchozí hodnoty.
Reagovat JS setState
setState je asynchronní volání znamená, že pokud je zavoláno synchronní volání, nemusí být aktualizováno ve správný čas, například když chcete znát aktuální hodnotu objektu po aktualizaci pomocí setState, nemusí poskytnout aktuální aktualizovanou hodnotu na konzole. Chcete-li získat nějaké synchronní chování, musíte předat funkci místo objektu setState.
Syntax:
Můžeme použít setState() ke změně stavu komponenty přímo nebo pomocí funkce šipky.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Kroky k vytvoření aplikace React:
Krok 1: Vytvořte aplikaci React pomocí následujícího příkazu:
b plus strom
npx create-react-app foldername>
Krok 2: Po vytvoření složky projektu, tj. název složky, se do ní přesuňte pomocí následujícího příkazu:
cd foldername>
Struktura projektu:
Přístup 1: Aktualizace jednoho atributu
Uvnitř nastavíme naši počáteční hodnotu stavu funkce konstruktoru a vytvořit další funkci updateState() pro aktualizaci stavu. Nyní, když klikneme na tlačítko, toto tlačítko se spustí jako událost onClick která mění hodnotu stavu. Provádíme metodu setState() v našem funkce updateState(). psaním:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Jak můžete vidět, předáváme objekt setState(). Tento objekt obsahuje část stavu, kterou chceme aktualizovat, což je v tomto případě hodnota Pozdrav . React převezme tuto hodnotu a sloučí ji do objektu, který ji potřebuje. Je to jako když se komponenta tlačítka zeptá, co by měla použít pro aktualizaci hodnoty pozdravu, a setState() odpoví odpovědí.
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> >>
>{>/* Set click handler */>}> > this.updateState}>Klikni na mě! ); } } exportovat výchozí aplikaci;> |
kruhový plánovací algoritmus
>
>
Krok ke spuštění aplikace: Spusťte aplikaci pomocí následujícího příkazu z kořenového adresáře projektu:
npm start>
Výstup: Nyní otevřete prohlížeč a přejděte na http://localhost:3000/ , uvidíte následující výstup:
Přístup 2: Aktualizace více atributů
Stavový objekt komponenty může obsahovat více atributů a React umožňuje pomocí funkce setState() aktualizovat pouze podmnožinu těchto atributů a také pomocí více metod setState() aktualizovat každou hodnotu atributu nezávisle.
Náš počáteční stav nastavíme inicializací tří různých atributů a poté vytvoříme funkci updateState() který aktualizuje svou hodnotu, kdykoli je zavolán. Tato funkce se opět spustí jako událost onClick a zároveň získáme aktualizované hodnoty našich stavů.
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ě! ); } } exportovat výchozí aplikaci;> |
>
>
Krok ke spuštění aplikace: Spusťte aplikaci pomocí následujícího příkazu z kořenového adresáře projektu:
npm start>
Výstup: Nyní otevřete prohlížeč a přejděte na http://localhost:3000/ , uvidíte následující výstup:
Přístup 3: Aktualizace stavových hodnot pomocí rekvizit.
Nastavíme pole řetězců testTopics jako rekvizity pro naši součást. Funkce seznam témat je vytvořen k mapování všech řetězců jako položek seznamu v našem státě témata . Funkce updateState se spustí a nastaví témata na seznam položek. Když klikneme na tlačítko, získáme aktualizované hodnoty stavu. Tato metoda je známá tím, že zpracovává složitá data a velmi snadno aktualizuje stav.
co je to souborový systém linux
Javascript
// 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> >>
převod řetězce na celé číslo v jazyce Java >>
>{>/* Set click handler */>}> > this.updateState}>Klikni na mě! ); } } exportovat výchozí aplikaci;> |
>
>
Krok ke spuštění aplikace: Spusťte aplikaci pomocí následujícího příkazu z kořenového adresáře projektu:
npm start>
Výstup: Nyní otevřete prohlížeč a přejděte na http://localhost:3000/ , uvidíte následující výstup:
Přístup 4: Aktualizace stavu pomocí předchozí hodnoty.
Vytvoříme počáteční stav počet mající hodnotu 0. Funkce updateState() zvýší současnou hodnotu stavu o 1, kdykoli je zavolán. Tentokrát použijeme metodu setState() ve funkci šipky předáním prevState jako parametr. K aktuální hodnotě stavu se přistupuje pomocí prevState.stateName který se zvýší o 1, kdykoli stiskneme tlačítko. Tato metoda je opravdu užitečná, když nastavujeme hodnotu ve stavu tak, že závisí na její předchozí hodnotě. Například , přepínání boolean (pravda/nepravda) nebo zvýšení/snížení čísla.
Javascript
pohledy a tabulky
// 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ě! ); } } exportovat výchozí aplikaci;> |
>
>
Krok ke spuštění aplikace: Spusťte aplikaci pomocí následujícího příkazu z kořenového adresáře projektu:
npm start>
Výstup: Nyní otevřete prohlížeč a přejděte na http://localhost:3000/ , uvidíte následující výstup:
