reagovat.Komponenta

Tato stránka obsahuje podrobný odkaz API pro definici třídy komponent React. Předpokládá, že jste obeznámeni se základními koncepty React, jako jsou komponenty a rekvizity, stejně jako stav a životní cyklus. Pokud nejste, přečtěte si je jako první.

přehled

React umožňuje definovat komponenty jako třídy nebo funkce. Komponenty definované jako třídy v současné době poskytují více funkcí, které jsou podrobně popsány na této stránce. Chcete-li definovat třídu komponent React, musíte rozšířit React.Component:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}

jediný způsob, musíte definovat v React.Component podtřídy se nazývá render(). Všechny ostatní metody popsané na této stránce jsou volitelné.

důrazně doporučujeme, abyste si nevytvářeli vlastní třídy základních komponent. V komponentách React je opětovné použití kódu primárně dosaženo spíše složením než dědičností.

Poznámka:

React vás nenutí používat syntaxi třídy ES6. Pokud se tomu chcete vyhnout, můžete místo toho použít modul create-react-class nebo podobnou vlastní abstrakci. Podívejte se na použití React bez ES6 a dozvíte se více.

životní cyklus komponenty

každá komponenta má několik „metod životního cyklu“, které můžete přepsat pro spuštění kódu v určitých časech procesu. Tento diagram životního cyklu můžete použít jako tahák. V níže uvedeném seznamu jsou běžně používané metody životního cyklu označeny tučně. Zbytek z nich existuje pro relativně vzácné případy použití.

Montáž

Tyto metody jsou volány v následujícím pořadí, pokud instance komponentu je vytvořen a vložen do DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Poznámka:

Tyto metody jsou považovány za dědictví, a vy byste měli vyhnout se jim v nové kódu:

• UNSAFE_componentWillMount()

Aktualizace

aktualizace může být způsoben změny rekvizity nebo státu. Tyto metody jsou volány v následujícím pořadí, kdy součástí je re-vykreslen:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Poznámka:

Tyto metody jsou považovány za dědictví, a vy byste měli vyhnout se jim v novém kodexu:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

Odpojení

Tato metoda je volána, když je prvek byl odstraněn z DOM:

• componentWillUnmount()

Chybová hlášení

Tyto metody jsou volány, když dojde k chybě při vykreslování v cyklu metodu, nebo v konstruktoru každé dítě součástí.

• static getDerivedStateFromError()
• componentDidCatch()

Další rozhraní Api

Každá komponenta také poskytuje některé další Api:

• setState()
• forceUpdate()

Třída Vlastnosti

• defaultProps
• displayName

Vlastnosti Instance

• props
• state

Odkaz

Běžně Používané Metody životního Cyklu

metody v této části pokrýt drtivou většinu případů použití se kterými se setkáte vytvoření Reagovat komponenty. Pro vizuální orientaci, podívejte se na tento diagram životního cyklu.

render()

render()

render() metoda je pouze nutné metoda ve třídě component.

Při volání, je třeba zkoumat this.propsthis.state a vrátí jednu z následujících typů:

• Reagovat prvky. Typicky vytvořen pomocí JSX. Například <div /><MyComponent /> Reagovat prvky, které pokyn Reagovat k tomu, aby DOM uzel, nebo další uživatelem definované složky, resp.
• pole a fragmenty. Umožní vám vrátit více prvků z renderu. Další podrobnosti naleznete v dokumentaci k fragmentům.
• portály. Umožní vám vykreslit děti do jiného podstromu DOM. Další podrobnosti naleznete v dokumentaci na portálech.
• řetězec a čísla. Ty jsou vykresleny jako textové uzly v DOM.
• Booleans or null. Nic neudělej. (Většinou existuje pro podporu return test && <Child /> vzor, kde test je boolean.)

render() funkce by měla být čistá, což znamená, že to nemění složka státu, vrátí stejný výsledek pokaždé, když je vyvolána, a to není přímo komunikovat s prohlížeči.

Pokud potřebujete komunikovat s prohlížečem, proveďte svou práci v componentDidMount() nebo v jiných metodách životního cyklu. Udržování render() pure usnadňuje přemýšlení o komponentách.

Poznámka:

render() nebude uplatněna, pokud shouldComponentUpdate() vrací false.

constructor()

constructor(props)

Pokud nechcete inicializovat stav a vy nemusíte vázat metody, nemusíte implementovat konstruktor pro vaše Reagovat komponenty.

konstruktor pro komponentu React je volán před jeho montáží. Při implementaci konstruktoru pro React.Component podtřídy byste měli volat super(props) před jakýmkoli jiným příkazem. V opačném případě bude this.props v konstruktoru nedefinováno, což může vést k chybám.

konstruktory React se obvykle používají pouze pro dva účely:

• inicializace lokálního stavu přiřazením objektu this.state.
• vazba metody obsluhy událostí na instanci.

neměli byste volat setState() v constructor(). Místo toho, pokud vaše složky musí používat místní státní, přiřadit počáteční stav this.state přímo v konstruktoru:

constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

Konstruktoru je jediné místo, kde byste měli přiřadit this.state přímo. Ve všech ostatních metodách musíte místo toho použít this.setState().

vyvarujte se zavádění jakýchkoli vedlejších účinků nebo odběrů v konstruktoru. Pro tyto případy použití použijte místo toho componentDidMount().

Poznámka

Vyhněte se kopírování rekvizit do stavu! To je častý omyl:

constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}

problém je, že je to zbytečné (můžete použít this.props.color přímo místo), a vytváří chyby (aktualizace color prop nebudou zohledněny ve státě).

použijte tento vzor, pouze pokud chcete záměrně ignorovat aktualizace prop. V takovém případě má smysl přejmenovat podpěru na initialColor nebo defaultColor. Potom můžete vynutit, aby komponenta „resetovala“ její vnitřní stav změnou key v případě potřeby.

Přečtěte si náš blog post na zamezení odvozen státu, dozvědět se o co dělat, pokud si myslíte, že budete potřebovat nějaké státní záviset na rekvizity.

componentDidMount()

componentDidMount()

componentDidMount() je vyvolána ihned po složka je namontován (vložen do stromu). Inicializace, která vyžaduje uzly DOM, by měla jít sem. Pokud potřebujete načíst data ze vzdáleného koncového bodu, je to dobré místo pro instanci síťového požadavku.

tato metoda je dobrým místem pro nastavení předplatného. Pokud tak učiníte, nezapomeňte se odhlásit v componentWillUnmount().

můžete volat setState() ihned v componentDidMount(). Spustí další Vykreslování, ale stane se to dříve, než prohlížeč aktualizuje obrazovku. To zaručuje, že i když render() bude v tomto případě voláno dvakrát, uživatel neuvidí přechodný stav. Tento vzor používejte opatrně, protože často způsobuje problémy s výkonem. Ve většině případů byste měli být schopni místo toho přiřadit počáteční stav v constructor(). To však může být nezbytné pro případy, jako jsou modální slovesa a bubliny, když potřebujete měřit DOM uzlu před vykreslování něco, co závisí na jeho velikost nebo pozici.

componentDidUpdate ()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() se vyvolá okamžitě po aktualizaci. Tato metoda není vyvolána pro počáteční vykreslení.

použijte to jako příležitost k provozu na DOM, když byla komponenta aktualizována. To je také dobré místo pro síťové požadavky, pokud porovnáte aktuální rekvizity s předchozími rekvizitami (např. požadavek na síť nemusí být nutný, pokud se rekvizity nezměnily).

componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}

můžete volat setState()componentDidUpdate() ale všimněte si, že to musí být zabalené v takovém stavu, jako v příkladu výše, nebo budete způsobit, že nekonečné smyčce. To by také způsobilo další re-rendering, který, i když není viditelný pro uživatele, může ovlivnit výkon komponenty. Pokud se snažíte „zrcadlit“ nějaký stav na rekvizitu přicházející shora, zvažte použití rekvizity přímo. Přečtěte si více o tom, proč kopírování rekvizit do stavu způsobuje chyby.

Pokud vaše komponenta implementuje getSnapshotBeforeUpdate() životního cyklu (což je vzácné), hodnoty se vrátí, bude předán jako třetí „snímek“ parametr componentDidUpdate(). V opačném případě bude tento parametr nedefinován.

Poznámka:

componentDidUpdate() nebude uplatněna, pokud shouldComponentUpdate() vrací false.

componentWillUnmount()

componentWillUnmount()

componentWillUnmount() je vyvolána bezprostředně před součást je odpojen a zničeny. Proveďte veškeré potřebné vyčištění v této metodě, jako je zneplatnění časovačů, zrušení síťových požadavků nebo vyčištění všech odběrů vytvořených v componentDidMount().

neměli byste volat setState() v componentWillUnmount(), protože komponenta nebude nikdy znovu vykreslena. Jakmile je instance komponenty odpojena, nikdy nebude znovu připojena.

zřídka používané metody životního cyklu

metody uvedené v této části odpovídají méně častým případům použití. Jsou užitečné jednou za čas, ale většina vašich komponent pravděpodobně žádnou z nich nepotřebuje. Většinu níže uvedených metod můžete vidět v tomto schématu životního cyklu, pokud kliknete na zaškrtávací políčko“ Zobrazit méně běžné životní cykly “ v jeho horní části.

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

Použití shouldComponentUpdate() nechat Reagovat vědět, jestli component výstup není ovlivněn aktuální změny ve stavu nebo rekvizity. Výchozí chování je znovu vykreslit při každé změně stavu a ve většině případů byste se měli spolehnout na výchozí chování.

shouldComponentUpdate() je vyvolán před vykreslením, když jsou přijímány nové rekvizity nebo stav. Výchozí hodnota je true. Tato metoda není volána pro počáteční vykreslení nebo při použití forceUpdate().

tato metoda existuje pouze jako optimalizace výkonu. Nespoléhejte se na to, abyste“ zabránili “ Vykreslování, protože to může vést k chybám. Zvažte použití vestavěného PureComponent namísto zápisu shouldComponentUpdate() ručně. PureComponent provádí mělké srovnání rekvizit a stavu a snižuje pravděpodobnost, že přeskočíte potřebnou aktualizaci.

Pokud jste si jisti, že chcete napsat ručně, můžete porovnat this.propsnextPropsthis.statenextState a vrátí false Reagovat aktualizace může být přeskočen. Všimněte si, že návrat false nebrání tomu, aby podřízené komponenty znovu vykreslovaly, když se jejich stav změní.

nedoporučujeme provádět hluboké kontroly rovnosti nebo používat JSON.stringify() v shouldComponentUpdate(). Je velmi neefektivní a poškodí výkon.

v Současné době, pokud shouldComponentUpdate() výnosy falseUNSAFE_componentWillUpdate()render()componentDidUpdate() nebude se odvolávat. V budoucnu může React považovat shouldComponentUpdate() spíše za nápovědu než za přísnou směrnici a návrat false může stále vést k opětovnému vykreslení komponenty.

statické getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps je vyvolána těsně před volá metodu render, a to jak na počáteční montáž a následné aktualizace. Je třeba vrátit objekt aktualizovat stav, nebo null aktualizovat nic.

tato metoda existuje pro vzácné případy použití, kdy stav závisí na změnách rekvizit v průběhu času. Například, to může být užitečné pro provádění <Transition> komponenta, která porovnává předchozí a další děti rozhodnout, který z nich animovat dovnitř a ven.

odvození stavu vede k podrobnému kódu a ztěžuje přemýšlení o vašich komponentách.Ujistěte se, že jste obeznámeni s jednoduššími alternativami:

• Pokud potřebujete provést vedlejší efekt (například načítání dat nebo animace) v reakci na změnu rekvizit, používání componentDidUpdate životního cyklu místo.
• Pokud chcete, aby re-spočítat některé údaje pouze tehdy, když prop změny, použijte memoization pomocník místo.
• Pokud chcete, aby „reset“ nějaký stav, kdy rekvizita změny, zvažte buď součástí plně ovládané nebo plně nekontrolované key místo.

tato metoda nemá přístup k instanci komponenty. Pokud chcete, můžete použít nějaký kód mezi getDerivedStateFromProps() a další metody třídy extrakcí čistého funkcí dílčích rekvizit a stát mimo definici třídy.

Všimněte si, že tato metoda je vypálena na každém vykreslení, bez ohledu na příčinu. To je na rozdíl od UNSAFE_componentWillReceiveProps, který pouze požáry, kdy rodič způsobí re-render, a nikoli jako výsledek místního setState.

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() je volána těsně předtím, než naposledy vykreslený výstup je odhodlána např. DOM. Umožňuje komponentě zachytit některé informace z DOM (např. Jakákoli hodnota vrácená tímto životním cyklem bude předána jako parametr componentDidUpdate().

tento případ použití není běžný, ale může se vyskytnout v UIs jako chatovací vlákno, které musí zvládnout rolovací pozici zvláštním způsobem.

je třeba vrátit hodnotu snímku (nebo null).

například:

class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}

Ve výše uvedených příkladech, je důležité, aby si scrollHeight nemovitosti v getSnapshotBeforeUpdate protože tam může být zpoždění mezi „render“ fáze životního cyklu (jako render) a „spáchat“ fáze životního cyklu (jako getSnapshotBeforeUpdatecomponentDidUpdate).

Chyba hranice

Chyba hranice jsou React komponenty, které chytit chyby v Javascriptu kdekoliv v jejich dílčí součásti, strom, přihlásit tyto chyby, a zobrazit záložní UI namísto stromu komponent, které havarovalo. Hranice chyb zachycují chyby během vykreslování, v metodách životního cyklu a v konstruktorech celého stromu pod nimi.

komponenta třídy se stává hranicí chyb, pokud definuje buď (nebo obojí) metod životního cyklu static getDerivedStateFromError() nebo componentDidCatch(). Aktualizace stavu z těchto životních cyklů vám umožní zachytit neošetřenou chybu JavaScriptu v níže uvedeném stromu a zobrazit záložní uživatelské rozhraní.

použijte pouze hranice chyb pro obnovení neočekávaných výjimek; nesnažte se je použít pro řízení toku.

Další podrobnosti viz zpracování chyb v React 16.

Poznámka:

Chyba hranice jen chytit chyby v součásti pod nimi ve stromu. Hranice chyby nemůže zachytit chybu v sobě.

statické getDerivedStateFromError()

static getDerivedStateFromError(error)

Tento životní cyklus je vyvolána po chybě byla vyvolána potomkem component.Obdrží chybu, která byla vyvolána jako parametr a měla by vrátit hodnotu k aktualizaci stavu.

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Poznámka:

getDerivedStateFromError() se nazývá v „render“ fáze, takže vedlejší účinky nejsou povoleny.Pro tyto případy použití použijte místo toho componentDidCatch().

componentDidCatch()

componentDidCatch(error, info)

Tento životní cyklus je vyvolána po chybě byla vyvolána potomkem component.Přijímá dva parametry:

1. error – chyba, která byla vyvolána.
2. info – objekt s klíčem componentStack obsahující informace o tom, která komponenta chybu vyhodila.

componentDidCatch() je volán během fáze“ commit“, takže vedlejší účinky jsou permitted.It by měl být použit pro věci, jako jsou chyby protokolování:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Výroba a vývoj vychází z Reagují mírně liší ve způsobu, componentDidCatch() zpracovává chyby.

Na vývoj, chyby bude bublina window, to znamená, že žádné window.onerror nebo window.addEventListener('error', callback) budou zachytit chyby, které byly odloveny componentDidCatch().

Na produkci, místo toho, chyby nebude bublina, což znamená, že jakékoli předek error handler obdrží pouze chyby, které nejsou výslovně chycen componentDidCatch().

Poznámka:

V případě chyby, můžete učinit záložní uživatelské ROZHRANÍ s componentDidCatch() zavoláním setState, ale bude to nepoužívá v budoucí verzi.Použijte static getDerivedStateFromError() pro zpracování nouzového Vykreslování.

starší metody životního cyklu

níže uvedené metody životního cyklu jsou označeny jako „starší“. Stále fungují, ale nedoporučujeme je používat v novém kódu. V tomto příspěvku na blogu se můžete dozvědět více o přechodu od starších metod životního cyklu.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

Poznámka:

Tento cyklus byl dříve pojmenován componentWillMount. Tento název bude fungovat až do verze 17. Použijte rename-unsafe-lifecycles codemod pro automatickou aktualizaci komponent.

UNSAFE_componentWillMount() je vyvolán těsně před montáží. Je volán před render(), proto volání setState() synchronně v této metodě nespustí další Vykreslování. Obecně doporučujeme pro inicializaci stavu použít constructor().

vyvarujte se zavádění jakýchkoli vedlejších účinků nebo předplatného v této metodě. Pro tyto případy použití použijte místo toho componentDidMount().

Toto je jediná metoda životního cyklu nazývaná při vykreslování serveru.

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

Poznámka:

Tento cyklus byl dříve pojmenován componentWillReceiveProps. Tento název bude fungovat až do verze 17. Použijte rename-unsafe-lifecycles codemod pro automatickou aktualizaci komponent.

Poznámka:

Použitím tohoto životního cyklu metoda často vede k chyby a nesrovnalosti,

• Pokud potřebujete provést vedlejší efekt (například načítání dat nebo animace) v reakci na změnu rekvizit, používání componentDidUpdate životního cyklu místo.
• Pokud jste použili componentWillReceiveProps pro re-computing některé údaje pouze tehdy, když prop změny, použijte memoization pomocník místo.
• Pokud jste použili componentWillReceiveProps „reset“ nějaký stav, kdy rekvizita změny, zvažte buď součástí plně ovládané nebo plně nekontrolované key místo.

pro ostatní případy použití postupujte podle doporučení v tomto blogu o odvozeném stavu.

UNSAFE_componentWillReceiveProps() je vyvolán dříve, než namontovaná součást obdrží nové rekvizity. Pokud potřebujete aktualizovat stav v reakci na prop změny (například resetovat), můžete porovnat this.propsnextProps a provádět státní přechody pomocí this.setState() v této metodě.

Všimněte si, že pokud nadřazená komponenta způsobí opětovné vykreslení komponenty, bude tato metoda volána, i když se rekvizity nezměnily. Nezapomeňte porovnat aktuální a další hodnoty, pokud chcete zpracovat pouze změny.

React nevolá UNSAFE_componentWillReceiveProps() s počátečními podpěrami během montáže. Tuto metodu volá pouze v případě, že se některé rekvizity komponenty mohou aktualizovat. Volání this.setState() obecně nespouští UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

Poznámka:

Tento cyklus byl dříve pojmenován componentWillUpdate. Tento název bude fungovat až do verze 17. Použijte rename-unsafe-lifecycles codemod pro automatickou aktualizaci komponent.

UNSAFE_componentWillUpdate() je vyvolán těsně před vykreslením, když jsou přijímány nové rekvizity nebo stav. Použijte to jako příležitost k provedení přípravy před aktualizací. Tato metoda není vyvolána pro počáteční vykreslení.

Všimněte si, že nemůžete hovor this.setState() tady, ani byste měli dělat něco jiného (např. odeslání Redux akce), které by mohlo vyvolat aktualizaci na Reagovat součást před UNSAFE_componentWillUpdate() vrátí.

obvykle lze tuto metodu nahradit componentDidUpdate(). Pokud jste v této metodě četli z DOM (např. pro uložení pozice rolování), můžete tuto logiku přesunout na getSnapshotBeforeUpdate().

Poznámka:

UNSAFE_componentWillUpdate() nebude uplatněna, pokud shouldComponentUpdate() vrací false.

Další rozhraní Api

na Rozdíl od životního cyklu výše uvedených metod (které Reagují volání pro vás), níže uvedené metody jsou metody, které můžete volat z komponenty.

jsou jen dva z nich: setState() a forceUpdate().

setState()

setState(updater, )

setState() enqueues změny stavu komponenty a řekne Reagovat, že tato složka a její děti potřebují být re-vykreslen s aktualizovanou státní. Toto je primární metoda, kterou používáte k aktualizaci uživatelského rozhraní v reakci na obsluhu událostí a odpovědi serveru.

myslete na setState() jako požadavek spíše než okamžitý příkaz k aktualizaci komponenty. Pro lepší vnímaný výkon může React zpozdit a poté aktualizovat několik komponent v jednom průchodu. React nezaručuje, že změny stavu budou aplikovány okamžitě.

setState() ne vždy okamžitě aktualizuje komponentu. Může dávku nebo odložit aktualizaci až později. To dělá čtení this.state hned po volání setState() potenciální úskalí. Místo toho použijte componentDidUpdate nebo setState callback (setState(updater, callback)), které jsou zaručeny, aby se oheň po aktualizace byla použita. Pokud potřebujete nastavit stav na základě předchozího stavu, přečtěte si o argumentu updater níže.

setState() vždy povede k opětovnému vykreslení, pokud shouldComponentUpdate() vrátí false. Pokud proměnlivých objektů jsou používány a podmíněné vykreslování logika nemůže být realizován v shouldComponentUpdate() volat setState() pouze tehdy, když nový stav liší od předchozího stavu se zabránilo zbytečné znovu vykreslí.

první argument je updater funkce s podpisem:

(state, props) => stateChange

state je odkaz na složku státu v době, kdy změna je uplatňována. Nemělo by být přímo mutováno. Místo toho by změny měly být reprezentovány vytvořením nového objektu založeného na vstupu z state a props. Předpokládejme například, že bychom chtěli zvýšit hodnotu ve stavu o props.step:

this.setState((state, props) => { return {counter: state.counter + props.step};});

stateprops přijaté updater funkce jsou zaručeně být up-to-date. Výstup Updateru je mělce sloučen s state.

druhý parametr setState() je volitelná funkce zpětného volání, která bude provedena po dokončení setState a opětovném vykreslení komponenty. Obecně doporučujeme použít componentDidUpdate() pro takovou logiku.

volitelně můžete předat objekt jako první argument setState() namísto funkce:

setState(stateChange)

Toto provádí mělké sloučení stateChange do nového státu, např. upravit nákupní košík položka množství:

this.setState({quantity: 2})

Tento formulář setState() je také asynchronní a více volání během stejného cyklu, může být batched společně. Pokud se například pokusíte zvýšit množství položky více než jednou ve stejném cyklu, bude to mít za následek ekvivalent:

Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)

Následné volání přepíše hodnoty z předchozího volání ve stejném cyklu, tak množství, které bude jen zvýší jednou. Pokud další stav závisí na aktuálním stavu, doporučujeme použít updater funkci, formu, místo:

this.setState((state) => { return {quantity: state.quantity + 1};});

Pro více podrobností, viz:

• Státní a životního Cyklu průvodce
• hloubka: Kdy a proč se setState() volání dávkové?
• in depth: proč není this.state okamžitě aktualizován?

forceUpdate()

component.forceUpdate(callback)

ve výchozím nastavení, když vaše složky státu nebo rekvizity změnit, vaše složka bude re-render. Pokud váš render() metody závisí na nějaké jiné údaje, můžete říct, Reagovat, že součástka potřebuje re-rendering zavoláním forceUpdate().

Volat forceUpdate(), protože render() být nazýván na součásti, přeskakování shouldComponentUpdate(). Tím se spustí normální metody životního cyklu pro podřízené komponenty, včetně metody shouldComponentUpdate() každého dítěte. React bude stále aktualizovat DOM, pouze pokud se změní označení.

za normálních okolností byste se měli snažit vyhnout použití forceUpdate() a pouze číst z this.propsthis.staterender().

vlastnosti třídy

defaultProps

defaultProps lze definovat jako vlastnost samotné třídy komponent pro nastavení výchozích rekvizit pro třídu. This is used for undefined props, but not for null props. For example:

class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};

If props.color is not provided, it will be set by default to 'blue':

 render() { return <CustomButton /> ; // props.color will be set to blue }

If props.color is set to null, it will remain null:

 render() { return <CustomButton color={null} /> ; // props.color will remain null }

displayName

The displayName string is used in debugging messages. Obvykle ji nemusíte nastavovat explicitně, protože je odvozena z názvu funkce nebo třídy, která definuje komponentu. Možná budete chtít nastavit explicitně, pokud chcete zobrazit jiný název pro účely ladění nebo při vytvoření vyšší objednávky komponent, viz Obal Zobrazovaný Název pro Snadné Ladění pro podrobnosti.

vlastnosti Instance

props

this.props obsahuje rekvizity, které byly definovány volajícím této komponenty. Viz komponenty a rekvizity pro úvod do rekvizit.

zejména, this.props.children je speciální rekvizita, obvykle definována dítě tagy v JSX výraz, spíše než ve značce samotné.

stav

stav obsahuje data specifická pro tuto komponentu, která se mohou časem měnit. Stav je definován uživatelem a měl by to být prostý objekt JavaScriptu.

pokud nějaká hodnota není použita pro vykreslování nebo tok dat (například ID časovače), nemusíte ji uvádět do stavu. Takové hodnoty lze definovat jako pole v instanci komponenty.

Viz stav a životní cyklus pro více informací o stavu.

Nikdy mutovat this.state přímo, jako volání setState() poté může nahradit mutace, které jste provedli. Zacházejte s this.state, jako by to bylo neměnné.