Co jsou metody životního cyklu komponent v React JS ??

Stejně jako my všichni, i komponenty React se rodí, rostou a umírají!

(Habilelabs) (7. prosince 2020)

Autor Payal Mittal

Metody životního cyklu komponent v Reactjs
Metody životního cyklu komponent v React.js

Každá komponenta třídy React prochází řadou„ metody životního cyklu “. V zásadě se všechno v Reactu skládá buď z komponent, nebo z části komponent.

Tyto komponenty podléhají určitému životnímu cyklu, téměř jako u jakéhokoli živého tvora na Zemi. Rodí se, rostou a nakonec zemřou. Fáze, kdy se narodí, se nazývá montáž, když rostou, nazývá se aktualizace a poslední fáze smrti se nazývá odpojení.

Celý tento proces se nazývá „Životní cyklus komponent“. Pro každou z těchto fází vykresluje React.js určité vestavěné metody označované jako metody životního cyklu, které řídí chování komponent v aplikaci.

V tomto blogu projdeme tímto životním cyklem a získáme vědět o těchto metodách životního cyklu –

Co jsou metody životního cyklu komponent?

Metody životního cyklu komponent jsou rozděleny do tří různých fází, protože –

  • Připojení
  • Aktualizace
  • Odpojení

Celému životnímu cyklu komponent lze porozumět pomocí této jednoduché vizuální ilustrace –

Diagram životního cyklu komponent

Nyní podrobně probereme každou z fází a jejich metody. Pojďme tedy –

✔ Připojení metod životního cyklu

Po dokončení komponenty inicializace, začíná připojování komponent, ve kterém je komponenta vytvořena a vložena do DOM.

Zde probereme nejčastěji používané metody životního cyklu –

1. constructor ()

constructor() se volá jako první před zahájením montáže a v zásadě se používá k obsluhování těchto dvou účely-

Místo použití setState(), můžete počáteční stav přímo přiřadit this.state() metodou constructor. Takto můžeme definovat náš stav –

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

Další v řadě je metoda render()! Připojí komponentu k DOM a vykreslí je do uživatelského rozhraní. Tato metoda je vyvolána k prozkoumání this.state a this.props atributů, kdykoli se v komponentě state nebo props.

render je nejběžněji používanou metodou v React. Pokud chcete vykreslit prvky v modelu DOM, pak render() je metoda, na kterou se můžete těšit, protože je zde můžete napsat.

Kdykoli je volána, může se vrátit mnoho typů, tj. řetězce, čísla, pole, fragmenty, logické hodnoty nebo null hodnotové, portálové nebo reagující prvky. Zde jsou uvedeny některé příklady –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Poznámka : Pokud metoda componentShouldMount vrací boolean false, metoda vykreslení nebude vyvolána.

3. componentDidMount ()

Tato metoda je volána okamžitě po vložení komponenty do DOM pomocí metody render . Volá se pouze jednou za životní cyklus.

  • Pokud chcete nastavit jakékoli předplatné, je to pro vás stejně dobré místo jako každé jiné. Budete se ale muset odhlásit v componetWillUnmount().
  • Je také dobrým místem k vytvoření instance síťového požadavku, pokud potřebujete načíst data ze vzdáleného koncový bod.
  • Zde můžete dokonce zavolat setState() . I když to opět spustí vykreslování, neuvidíte alespoň přechodný stav. Při používání však musíte být opatrní, protože to způsobuje problémy s výkonem. Ve skutečnosti byste měli přiřadit počáteční stav metodou constructor(), jak je to vhodné. Ale tento přístup se hodí, když potřebujete změřit uzel DOM před vykreslením něčeho, co závisí na jeho velikosti.

✔ Aktualizace metod životního cyklu

Na rozdíl od Mounting „Fáze, ke které dochází pouze jednou při připojování komponenty, může k fázi„ Aktualizace “dojít několikrát.

Kdykoli dojde ke změně rekvizit / stavu komponenty, kterou je třeba aktualizovat, zavolá časovač pro render a componentDidupdate pro potvrzení, aktualizaci a vykreslení změny vstoupí do hry fáze aktualizace.

1. static getDerivedStateFromProps ()

Toto je první metoda, která je volána ve fázi aktualizace životního cyklu. Lze jej volat vícekrát, protože se vyvolá vždy, když se zahájí metoda render . Je tedy zřejmé, že se volá během fáze montáže i aktualizace.

Tato metoda není příliš běžná a používá se jen zřídka v konkrétních případech, například když se stav komponenty mění se změnami rekvizit v průběhu času. Jak název napovídá, odvozuje stav z rekvizit.

2. shouldComponentUpdate ()

Tato metoda se volá, když se komponenta chystá znovu vykreslit. Určuje, zda aktuální změny ve states / props ovlivňují výstup komponenty. Používá se pouze jako prostředek optimalizace výkonu a dejte nám vědět „pokud se komponenta aktualizuje nebo ne“, což je vyjádřeno pomocí Boolean true nebo false hodnoty. Ve výchozím nastavení vrátí true.

Pokud

shouldComponentUpdate() vrátí false hodnota, znamená to, že říkáte React, aby tuto aktualizaci přeskočil, a proto nebudou volány metody render a componentDidUpdate.

Práce s metodou shouldComponentUpdate

Můžete však také zabránit zbytečnému vykreslování pomocí vestavěného

React.PureComponent který vám umožní porovnat nové a staré state / props a je nepravděpodobné, že byste přeskočili jakoukoli nezbytnou aktualizaci.

3. render ()

Další přichází render. Zda bude či nebude vyvoláno, závisí na hodnotě vrácené shouldComponentUpdate. Spustí se pouze v případě, že je vrácen true .

4. getSnapshotBeforeUpdate ()

Po volání render je

getSnapshotBeforeUpdate přijde další. Není běžně používán, ale je velmi užitečný v určitých konkrétních případech, například když potřebujete přístup k některým informacím v DOM a ihned po aktualizaci je změnit.

Tato metoda umožňuje komponentě zachytit některé informace (výška posouvání) z DOM, aby je bylo možné později (po aktualizaci) upravit. Musíte však pochopit, že zde zachycená výška posouvání označuje výšku před byla aktualizována na DOM.

Můžeme předat prevState a prevProps jako argumenty, jak jsou uvedeny zde –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Tato metoda se vyvolá ihned po aktualizaci a opětovném vykreslení komponenty. Přijímá prevState a prevProps jako parametry a může také přistupovat k nově změněnému stavu nebo rekvizitám.

Nicméně důrazně se doporučuje, abyste v této funkci nikdy přímo nenastavovali stav, jinak to dále spustí render a componentDidUpdate.

Prostřednictvím této metody se dostaneme k výpočtu scrollHeight rozdílu mezi tím, čím byl před aktualizací.

Toto je pouze jeden případ použití, tam je několik dalších podobných –

👉 Načtení dat ze serveru

👉 Přístup k uzlům DOM komponenty React

Chcete-li získat podrobnosti o jeho případech použití , podívejte se na oficiální dokumentaci –

React.Component – Reagovat

Tato stránka obsahuje podrobný odkaz na API pro třídu komponent React definice. Předpokládá, že jste „obeznámeni s…

reagovatjs.org

✔ Odpojení metod životního cyklu

Toto je poslední fáze, ve které prochází komponenta reakce, kde se odpojí od DOM a zničí. V této fázi existuje pouze jedna metoda životního cyklu.

1. componentWillUnmount ()

componentWillUnmount metoda je volána jako první ve fázi odpojování, těsně před zničením komponenty.Na tomto místě můžete provádět jakoukoli metodu čištění, v podstatě zrušení požadavků na síť, zneplatnění časovačů nebo vyčištění nežádoucích odběrů, které byly vytvořeny metodou componentDidMount .

Shrnutí:

Existuje několik dalších metod, které jsou vyvolány v případě, že dojde k chybě potomská komponenta, tyto metody se nazývají metody životního cyklu zpracování chyb. Najdete je zde .

To byli všichni programátoři !! Doufám, že prostřednictvím tohoto blogu lépe pochopíte metody životního cyklu komponenty React. Brzy se vám ozveme s dalším nápaditým blogem.

Do pak šťastné čtení !! 🙃

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *