React Components - Kellékek és állapotok a ReactJS-ben példákkal

„A Reactben minden egy alkotóelem”

Ha ismeri a React-et, akkor biztosan sokszor hallotta vagy olvasta ezt a kifejezést. De tudod, mit jelent pontosan és hogyan használják? Ha nem, akkor olvassa el ezt a blogot, hogy mindent megtudjon a React komponensekről és az életciklus különböző fázisairól. Biztos vagyok benne, mire befejezed Ezt a blogot elolvasva teljes mértékben megismerheti a React komponenseit és az azokat körülvevő fogalmakat. De mielőtt folytatná, nézze meg gyorsan azokat a témákat, amelyeket megvitatni fogok:

• Mik azok a React komponensek?
• A React komponensek előnyei
• Kellékek
• Államok
• Államok vs kellékek
• Reagálja az alkatrész életciklusát

Mik azok a React komponensek?

Korábban a fejlesztőknek 1000 sornyi kódot kellett írniuk egy egyszerű, egyoldalas alkalmazás fejlesztéséhez. Ezen alkalmazások többsége a hagyományos DOM struktúrát követte, és a változtatások végrehajtása nagyon kihívást jelentett és fárasztó feladat volt a fejlesztők számára.Manuálisan meg kellett keresniük a módosítást igénylő elemet, és ennek megfelelően frissíteniük. Még egy apró hiba is alkalmazás meghibásodásához vezethet. Sőt, a DOM frissítése nagyon költséges volt. Így bevezették a komponens-alapú megközelítést. Ebben a megközelítésben az egész alkalmazás logikai darabokra oszlik, amelyeket Komponenseknek nevezünk. A React volt az egyik keret, amely ezt a megközelítést választotta.Ha webfejlesztési karrierjét tervezi építeni, a korai indítás rengeteg lehetőséget nyit meg az Ön számára.

Most értsük meg, melyek ezek az alkatrészek.

A React komponenseket a felhasználói felület építőköveinek tekintjük. Ezen összetevők mindegyike ugyanazon a téren belül létezik, de egymástól függetlenül hajt végre. A React komponenseknek megvan a maguk felépítése, módszerei, valamint API-k. Újrafelhasználhatók, és szükség szerint befecskendezhetők az interfészekbe. A jobb megértés érdekében tekintse az egész felhasználói felületet fának.Itt a kiindulási komponens gyökérsé válik, és az egyes független darabok ágakká válnak, amelyeket tovább osztanak alágakra.

Ez rendezetten kezeli a felhasználói felületünket, és lehetővé teszi az adatok és állapotváltozások logikus áramlását a gyökérből az ágakba, majd az alágakba. Az alkatrészek közvetlenül a kliens oldaláról hívnak a szerverre, amely lehetővé teszi a DOM dinamikus frissítését az oldal frissítése nélkül. A reakciókomponensek ugyanis az AJAX kérések koncepciójára épülnek. Minden komponensnek megvan a saját felülete, amely hívásokat kezdeményezhet a szerverre és frissítheti őket. Mivel ezek az összetevők függetlenek egymástól, mindegyik frissülhet, anélkül, hogy másokat vagy az UI egészét érintené.

Használunk React.createClass () módszer egy komponens létrehozására. Ennek a metódusnak át kell adnia egy objektum argumentumot, amely meghatározza a React komponenst. Minden alkatrésznek pontosan egyet kell tartalmaznia Vakol() módszer. Ez egy olyan összetevő legfontosabb tulajdonsága, amely felelős a HTML elemzéséért a JavaScript-ben, a JSX-ben. Ez Vakol() az összetevő HTML-ábrázolását DOM-csomópontként adja vissza. Ezért az összes HTML-címkét be kell zárni egy záró címkébe a Vakol() .

Az alábbiakban bemutatunk egy mintakódot egy összetevő létrehozásához.

mi az osztály példája a java-ban

importálja a React-et a 'reakcióból', importálja a ReactDOM-et a 'reak-dom' osztályból A MyComponent kiterjeszti a React.Component {render () {return (
Az Ön azonosítója: {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Államok vs kellékek

Reagálja az alkatrész életciklusát

A React különféle módszereket kínál, amelyek értesítik, ha az alkatrészek életciklusának egy bizonyos szakasza bekövetkezik. Ezeket a módszereket életciklus-módszereknek nevezzük. Ezek az életciklus-módszerek nem túl bonyolultak. Gondolhat ezekre a módszerekre, mint speciális eseménykezelőkre, amelyeket az alkatrészek élettartama alatt különböző pontokon hívnak meg. Akár saját kódot is hozzáadhat ezekhez a módszerekhez különféle feladatok elvégzéséhez. Az alkatrész életciklusáról szólva az életciklus 4 szakaszra oszlik. Ők:

1. Kezdeti szakasz
2. Fázis frissítése
3. A kellékek megváltoztatják a fázist
4. Leválasztási fázis

E szakaszok mindegyike tartalmaz néhány életciklus-módszert, amelyek csak rájuk vonatkoznak. Tehát most derítsük ki, hogy mi történik e szakaszok mindegyikében.

a. Kezdeti szakasz - A React komponens életciklusának első fázisa a kezdeti fázis vagy a kezdeti renderelési fázis. Ebben a szakaszbanaz alkatrész hamarosan megkezdi útját, és utat mutat a DOM felé. Ez a fázis a következő módszerekből áll, amelyeket előre meghatározott sorrendben hívunk meg.

1. getDefaultProps (): Ez a módszer az alapértelmezett érték megadására szolgál ez.támaszt . Hívják, még mielőtt a komponens létrejön, vagy a szülő bármely kellékét átadnák.
2. getInitialState (): Ezt a módszert használjákadja meg alapértelmezett értéke ezt.államot mielőtt a komponens létrejön.
3. componentWillMount (): Ez az utolsó módszer, amelyet meghívhat, mielőtt a komponens megjelenik a DOM-ban. De ha hívsz setState () ezen a módszeren belül az alkatrész nem fog újra megjeleníteni.
4. Vakol(): Th is metódus felelős egyetlen gyökér HTML csomópont visszaküldéséért, és minden egyes komponensben meg kell határozni. Visszatérhet nulla vagy hamis arra az esetre, ha nem akar semmit megjeleníteni.
5. componentDidMount (): Miután az összetevőt rendereltük és elhelyeztük a DOM-on, ez módszert nevezzük. Itt bármilyen DOM lekérdezési műveletet elvégezhet.

b. Fázis frissítése - Miután az összetevőt hozzáadta a DOM-hoz, csak állapotváltozás esetén tudnak frissíteni és újra megjeleníteni. Valahányszor változik az állapot, az összetevő meghívja Vakol() újra. Bármely összetevő, amely ennek az összetevőnek a kimenetére támaszkodik, szintén annak hívja Vakol() újra. Ez annak érdekében történik, hogy az alkatrészünk a legújabb verzióját jelenítse meg. Így az összetevők állapotának sikeres frissítéséhez a következő módszereket kell meghívni az adott sorrendben:

1. shouldComponentUpdate (): Ezzel a módszerrel szabályozhatja a komponens viselkedését, amikor frissíti magát. Ha igazat ad vissza ebből a módszerből,az összetevő frissülni fog. Egyébként, ha ez a módszer ahamis, az összetevő kihagyja a frissítést.
2. componentWillUpdate (): Tmódszerét hívják jmielőtt a komponens frissülni készül. Ebben a módszerben nem változtathatja meg az összetevő állapotát hívással ez.állapot .
3. Vakol(): Ha hamisat ad vissza a következőn keresztül: shouldComponentUpdate () , a kódot belül Vakol() ismét meghívásra kerül, hogy az alkatrész megfelelően jelenjen meg.
4. componentDidUpdate (): Miután az összetevőt frissítette és renderelte, ezt a módszert hívja meg. Bármelyik kódot elhelyezheti ebben a módszerben, amelyet az összetevő frissítése után végre kell hajtania.

c. A fázis megváltoztatásának támogatásai - Után az összetevőt renderelték a DOM-ba, az állapotváltozást leszámítva az összetevő csak akkor frissül, ha a prop értéke megváltozik. Gyakorlatilag ez a szakasz hasonlóan működik, mint az előző szakasz, de az állam helyett a kellékekkel foglalkozik. Ennek a fázisnak tehát csak egy további módszere van a Frissítési fázisból.

1. componentWillReceiveProps (): Ez a metódus egy argumentumot ad vissza, amely tartalmazza az új prop értéket, amelyet hamarosan hozzárendelnek az összetevőhöz.
   Az életciklus többi része azonos módon viselkedik, mint az előző szakaszban.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. Vakol()
5. componentDidUpdate ()

d.A leválasztási szakasz -Ez az alkatrészek életciklusának utolsó szakasza, amelyben az alkatrész megsemmisül és teljesen eltávolításra kerül a DOM-ból. Csak egy módszert tartalmaz:

1. componentWillUnmount (): Miután meghívta ezt a módszert, az összetevőt véglegesen eltávolítja a DOM-ból.Ebben a módszerben Yvégezhet bármilyen tisztítással kapcsolatos feladatot, például eltávolíthatja az eseményhallgatókat, leállíthatja az időzítőket stb.

A következő az egész életciklus-diagram:

Ezzel eljutottunk a React Components című blog végéhez. Remélem, hogy ebben a blogban világosan meg tudtam magyarázni, hogy mik a React Components, hogyan használják őket. Hivatkozhat a blogomra a , ha többet szeretne megtudni a ReactJS-ről.

Ha ki akarsz képezni a React-ben, és egyedül szeretnéd fejleszteni az érdekes felhasználói felületet, akkor nézd meg a az Edureka, egy megbízható online tanulási vállalat, amelynek több mint 250 000 elégedett tanulóval rendelkező hálózata elterjedt az egész világon.

Van egy kérdésünk? Kérjük, említse meg a megjegyzések részben, és mi kapcsolatba lépünk Önnel.