Reagovat komponenty - rekvizity a stavy v ReactJS s příklady

'V React je vše součástí'

Pokud znáte React, pak jste tuto frázi jistě slyšeli nebo četli mnohokrát. Ale víte, co to přesně znamená a jak se používá? Pokud ne, přečtěte si tento blog a dozvíte se vše o komponentách React a různých fázích životního cyklu. Jsem si jistý, že do konce čtením tohoto blogu získáte úplné porozumění komponentám React a konceptům, které je obklopují. Ale než budete pokračovat, podívejte se rychle na témata, o kterých budu diskutovat:

• Co jsou komponenty React?
• Výhody reagujících komponent
• Rekvizity
• Státy
• Státy vs rekvizity
• Reagovat na životní cyklus komponent

Co jsou komponenty React?

Dříve museli vývojáři napsat 1000 řádků kódu pro vývoj jednoduché jednostránkové aplikace. Většina z těchto aplikací dodržovala tradiční strukturu DOM a provádění jejich změn bylo pro vývojáře velmi náročné a zdlouhavé.Ručně museli hledat prvek, který změnu potřeboval, a podle toho jej aktualizovat. I malá chyba by vedla k selhání aplikace. Aktualizace DOM byla navíc velmi nákladná. Byl tedy představen komponentový přístup. V tomto přístupu je celá aplikace rozdělena na logické bloky, které se nazývají komponenty. React byl jedním z rámců, který se rozhodl pro tento přístup.Pokud plánujete budovat svou kariéru v oblasti vývoje webových aplikací, brzký start by vám otevřel spoustu příležitostí.

Pojďme nyní pochopit, co jsou tyto komponenty.

Komponenty React jsou považovány za stavební kameny uživatelského rozhraní. Každá z těchto komponent existuje ve stejném prostoru, ale provádí se nezávisle na sobě. Komponenty React mají svou vlastní strukturu, metody i API. Jsou opakovaně použitelné a lze je podle potřeby vstřikovat do rozhraní. Chcete-li lépe porozumět, zvažte celé uživatelské rozhraní jako strom.Zde se počáteční složka stává kořenem a každá z nezávislých částí se stává větvemi, které se dále dělí na dílčí větve.

To udržuje naše uživatelské rozhraní organizované a umožňuje logickým tokům změn dat a stavu z kořene do větví a poté do dílčích větví. Komponenty uskutečňují volání na server přímo ze strany klienta, což umožňuje modelu DOM dynamicky se aktualizovat bez obnovení stránky. Důvodem je, že komponenty reakce jsou postaveny na konceptu požadavků AJAX. Každá komponenta má své vlastní rozhraní, které umožňuje volání na server a jejich aktualizaci. Jelikož jsou tyto komponenty navzájem nezávislé, každá se může aktualizovat, aniž by to ovlivnilo ostatní nebo uživatelské rozhraní jako celek.

Používáme React.createClass () metoda pro vytvoření komponenty. Této metodě musí být předán argument objektu, který bude definovat komponentu React. Každá součást musí obsahovat přesně jednu poskytnout() metoda. Je to nejdůležitější vlastnost komponenty, která je zodpovědná za analýzu HTML v JavaScriptu, JSX. Tento poskytnout() vrátí HTML reprezentaci komponenty jako uzel DOM. Proto musí být všechny značky HTML uzavřeny v uzavírající značce uvnitř souboru poskytnout() .

Následuje ukázkový kód pro vytvoření komponenty.

klady a zápory hackerství

import React from 'React' import ReactDOM from 'Reag-Dom' Class MyComponent Extends React.Component {render () {return (
Vaše ID je {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Státy vs rekvizity

Reagovat na životní cyklus komponent

React poskytuje různé metody, které upozorňují, když nastane určitá fáze životního cyklu komponenty. Tyto metody se nazývají metody životního cyklu. Tyto metody životního cyklu nejsou příliš komplikované. Tyto metody si můžete představit jako specializované obslužné rutiny událostí, které se volají v různých bodech během životnosti komponent. K těmto metodám můžete dokonce přidat vlastní kód, abyste mohli provádět různé úkoly. Když mluvíme o životním cyklu komponenty, životní cyklus je rozdělen do 4 fází. Oni jsou:

1. Úvodní fáze
2. Aktualizace fáze
3. Rekvizity mění fázi
4. Fáze odpojení

Každá z těchto fází obsahuje některé metody životního cyklu, které jsou specifické pouze pro ně. Pojďme tedy zjistit, co se děje během každé z těchto fází.

A. Úvodní fáze - První fáze životního cyklu komponenty React je počáteční fáze nebo počáteční fáze vykreslování. V této fázikomponenta se chystá zahájit svoji cestu a dostat se do DOMu. Tato fáze se skládá z následujících metod, které jsou vyvolány v předdefinovaném pořadí.

1. getDefaultProps (): Tato metoda se používá k určení výchozí hodnoty this.props . Volá se ještě předtím, než je vaše komponenta vytvořena nebo do ní jsou předány rekvizity od rodiče.
2. getInitialState (): Tato metoda je zvyklá naupřesnit výchozí hodnota toto. stát před vytvořením komponenty.
3. componentWillMount (): Toto je poslední metoda, kterou můžete zavolat, než se vaše komponenta vykreslí do DOMu. Ale když zavoláš setState () uvnitř této metody se vaše komponenta znovu nevykreslí.
4. poskytnout(): Čt Metoda is je zodpovědná za vrácení jednoho kořenového uzlu HTML a musí být definována v každé komponentě. Můžete se vrátit nula nebo Nepravdivé v případě, že nechcete nic vykreslovat.
5. componentDidMount (): Jakmile je komponenta vykreslena a umístěna na DOM, toto metoda se nazývá. Zde můžete provádět jakékoli operace dotazování DOM.

b. Aktualizace fáze - Jakmile je komponenta přidána do modelu DOM, mohou se aktualizovat a znovu vykreslit, pouze když dojde ke změně stavu. Pokaždé, když se stav změní, komponenta volá jeho poskytnout() znovu. Jakákoli komponenta, která se spoléhá na výstup této komponenty, bude také volat její poskytnout() znovu. To se provádí, aby se zajistilo, že naše součást zobrazuje nejnovější verzi své vlastní. Proto pro úspěšnou aktualizaci stavu komponent jsou vyvolány následující metody v daném pořadí:

1. shouldComponentUpdate (): Pomocí této metody můžete řídit chování vaší komponenty při samotné aktualizaci. Pokud z této metody vrátíte hodnotu true,součást se aktualizuje. Jinak, pokud tato metoda vrátí aNepravdivé, komponenta přeskočí aktualizaci.
2. componentWillUpdate (): Tjeho metoda se nazývá just před aktualizací vaší komponenty. V této metodě nemůžete změnit stav komponenty voláním this.setState .
3. poskytnout(): Pokud se vracíte nepravdivě prostřednictvím shouldComponentUpdate () , kód uvnitř poskytnout() bude znovu vyvoláno, aby se zajistilo, že se vaše komponenta zobrazí správně.
4. componentDidUpdate (): Jakmile je komponenta aktualizována a vykreslena, je vyvolána tato metoda. Do této metody můžete vložit libovolný kód, který chcete provést po aktualizaci komponenty.

C. Fáze rekvizit - Po komponenta byla vykreslena do modelu DOM, kromě změny stavu dojde pouze k další aktualizaci komponenty, kromě změny stavu rekvizity. Prakticky tato fáze funguje podobně jako předchozí fáze, ale místo státu se zabývá rekvizitami. Tato fáze má tedy pouze jednu další metodu z fáze aktualizace.

1. componentWillReceiveProps (): Tato metoda vrací jeden argument, který obsahuje novou hodnotu rekvizity, která má být přiřazena komponentě.
   Zbytek metod životního cyklu se chová stejně jako metody, které jsme viděli v předchozí fázi.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. poskytnout()
5. componentDidUpdate ()

d.Fáze odpojení -Toto je poslední fáze životního cyklu komponent, ve které je komponenta zničena a úplně odstraněna z DOM. Obsahuje pouze jednu metodu:

1. componentWillUnmount (): Po vyvolání této metody bude vaše komponenta trvale odstraněna z DOM.V této metodě Ymůžete provádět jakékoli úkoly související s vyčištěním, jako je odstranění posluchačů událostí, zastavení časovačů atd.

Následuje celý diagram životního cyklu:

Tím se dostáváme na konec blogu o React Components. Doufám, že jsem v tomto blogu dokázal jasně vysvětlit, co jsou React Components, jak se používají. Můžete se podívat na můj blog na , v případě, že se chcete dozvědět více o ReactJS.

Pokud se chcete nechat vyškolit v React a chcete si sami vyvinout zajímavé uživatelské rozhraní, podívejte se na Edureka, důvěryhodná online vzdělávací společnost se sítí více než 250 000 spokojených studentů po celém světě.

Máte na nás dotaz? Uveďte to prosím v sekci komentáře a my se vám ozveme.