komponenty React mohou a často mají stav. Stát může být cokoli, ale přemýšlejte o věcech, jako je to, zda je uživatel přihlášen nebo ne, a zobrazení správného uživatelského jména na základě toho, který účet je aktivní. Nebo řada blogových příspěvků. Nebo pokud je modální otevřený nebo ne a která karta v něm je aktivní.

reagovat komponenty s state render UI na základě tohoto stavu. Když se změní stav komponent, změní se i uživatelské rozhraní komponenty.

díky tomu je důležité pochopit, kdy a jak změnit stav komponenty. Na konci tohoto tutoriálu byste měli vědět, jak setState funguje, a měli byste se vyhnout běžným nástrahám, které mnozí z nás zasáhnou, když při učení reagují.

Činnost `setState()`

setState() je jediný legitimní způsob, jak aktualizovat stav po počáteční stav nastavení. Řekněme, že máme vyhledávací komponentu a chceme zobrazit hledaný výraz, který uživatel zadá.

zde je nastavení:

import React, { Component } from 'react'class Search extends Component { constructor(props) { super(props) state = { searchTerm: '' } }}

Jsme kolem prázdný řetězec jako hodnotu a aktualizovat stav searchTerm, musíme zavolat setState().

setState({ searchTerm: event.target.value })

zde předáváme objekt setState(). Objekt obsahuje část stavu, který chceme aktualizovat, což je v tomto případě hodnota searchTerm. React vezme tuto hodnotu a sloučí ji do objektu, který ji potřebuje. Je to něco jako Search součást zeptá, co je třeba používat pro hodnoty searchTermsetState() reaguje s odpovědí.

Toto je v podstatě odstartoval proces, který Reagoval hovory usmíření. Proces usmíření je způsob, jakým React aktualizuje DOM, provedením změn komponenty na základě změny stavu. Když je spuštěn požadavek na setState(), React vytvoří nový strom obsahující reaktivní prvky v komponentě (spolu s aktualizovaným stavem). Tento strom se používá k přijít na to, jak Search komponenty UI by se mělo změnit v reakci na změnu stavu porovnáním s prvky z předchozího stromu. React ví, jaké změny implementovat, a pouze v případě potřeby aktualizuje části DOM. Proto je React rychlý.

to zní jako hodně, ale shrnout tok:

• Máme hledat složku, která se zobrazí vyhledávací dotaz
• Že hledaný výraz je v současné době prázdný
• uživatel odešle hledaný termín
• Ten termín je zachycen a uložen pomocí setState hodnota
• Smíření se koná oznámení a Reagovat na změnu hodnoty
• Reagovat pověřuje vyhledávací složky k aktualizaci hodnoty a hledaný výraz je spojil v

proces usmíření nemusí nutně změnit celý strom, s výjimkou v situaci, kde kořen stromu je takhle změnil:

// old<div> <Search /></div>// new<span> <Search /></span>

<div> tagy <span> tagy a celá komponenta strom bude aktualizován jako výsledek.

pravidlem je nikdy nemutovat stav přímo. Vždy použijte setState() pro změnu stavu. Úprava stavu přímo, stejně jako úryvek níže, nezpůsobí opětovné vykreslení komponenty.

// do not do thisthis.state = { searchTerm: event.target.value}

Předávání Funkce `setState()`

prokázat tuto myšlenku dále, pojďme vytvořit jednoduché počítadlo, které přírůstků a úbytků na klepněte na tlačítko.

viz pero setState Pen od Kingsley Silas Chijioke (@kinsomicrote) na CodePen.

Pojďme se zaregistrovat komponenty a definovat označení pro uživatelské ROZHRANÍ:

class App extends React.Component {state = { count: 0 }handleIncrement = () => { this.setState({ count: this.state.count + 1 })}handleDecrement = () => { this.setState({ count: this.state.count - 1 })} render() { return ( <div> <div> {this.state.count} </div> <button onClick={this.handleIncrement}>Increment by 1</button> <button onClick={this.handleDecrement}>Decrement by 1</button> </div> ) }}

V tomto bodě, pult jednoduše zvýší nebo sníží počet o 1 na každé kliknutí.

ale co kdybychom místo toho chtěli zvýšit nebo snížit o 3? Mohli bychom zkusit volat setState() třikrát v handleDecrement a handleIncrement funkce jako je tato:

handleIncrement = () => { this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 1 })}handleDecrement = () => { this.setState({ count: this.state.count - 1 }) this.setState({ count: this.state.count - 1 }) this.setState({ count: this.state.count - 1 })}

Pokud kódujete doma, možná vás překvapí, že to nefunguje.

výše uvedený fragment kódu je ekvivalentní:

Object.assign( {}, { count: this.state.count + 1 }, { count: this.state.count + 1 }, { count: this.state.count + 1 },)

Object.assign() se používá ke kopírování dat ze zdrojového objektu do cílových objektů. Pokud mají všechna data zkopírovaná ze zdroje do cíle stejné klíče, jako v našem příkladu, vyhraje poslední objekt. Tady je to jednodušší verzi, jak Object.assign() funguje;

let count = 3const object = Object.assign({}, {count: count + 1}, {count: count + 2}, {count: count + 3});console.log(object);// output: Object { count: 6 }

místo volání děje třikrát, to se stává jen jednou. To lze opravit předáním funkce setState(). Stejně jako předáváte objekty setState(), můžete také předávat funkce, a to je cesta z výše uvedené situace.

upravit handleIncrement funkce vypadat takto:

handleIncrement = () => { this.setState((prevState) => ({ count: prevState.count + 1 })) this.setState((prevState) => ({ count: prevState.count + 1 })) this.setState((prevState) => ({ count: prevState.count + 1 }))}

…můžeme teď přírůstek počítat třikrát s jedním kliknutím.

v tomto případě namísto sloučení React front volá funkce v pořadí, v jakém jsou provedeny, a aktualizuje celý stav, který se provádí. Tím se aktualizuje stav počtu na 3 místo 1.

přístup k předchozímu stavu pomocí Updateru

při vytváření aplikací React jsou chvíle, kdy budete chtít vypočítat stav na základě předchozího stavu komponenty. Nemůžete vždy věřit this.state držet správný stav okamžitě po zavolání setState(), protože to je vždy rovná stavu vykreslen na obrazovce.

vraťme se k našemu příkladu čítače a uvidíme, jak to funguje. Řekněme, že máme funkci, která snižuje náš počet o 1. Tato funkce vypadá takto:

changeCount = () => { this.setState({ count: this.state.count - 1})}

chceme schopnost dekrementovat o 3. Funkce changeCount() je volána třikrát ve funkci, která zpracovává událost kliknutí, jako je tato.

handleDecrement = () => { this.changeCount() this.changeCount() this.changeCount()}

pokaždé, když kliknete na tlačítko pro snížení, počet se sníží o 1 místo 3. Je to proto, že this.state.count se neaktualizuje, dokud nebude komponenta znovu vykreslena. Řešením je použití aktualizátoru. Aktualizátor umožňuje přístup k aktuálnímu stavu a okamžitě jej použít k aktualizaci dalších položek. Takže funkce changeCount() bude vypadat takto.

changeCount = () => { this.setState((prevState) => { return { count: prevState.count - 1} })}

Nyní, v závislosti na výsledku this.state. Stavy count Jsou postaveny na sobě, takže máme přístup ke správnému stavu, který se při každém volání mění na changeCount().

setState() by se mělo zacházet asynchronně-jinými slovy, ne vždy očekávejte, že se stav po volání setState()změnil.

Balení

Při práci s setState(), to jsou hlavní věci, které byste měli vědět:

• Aktualizace do složky státu, by mělo být provedeno pomocí setState()
• můžete předat objekt nebo funkci setState()
• Předat funkci, kdy si můžete aktualizovat stav více krát
• nejsou závislé na to.stav ihned po volání setState() a místo toho použijte funkci updater.