Unë jam në një udhëtim të vogël të React për momentin, kështu që kam vendosur të shkruaj disa postime në blog rreth koncepteve të tij kryesore. E para në listën time është cikli i jetës së komponentit, në të cilin kohët e fundit më është dashur të mbërthejnë dhëmbët!

Ky artikull ofron një shpjegim të disa prej metodave më të dobishme të ciklit jetësor, përpara se të tregojë se si të përkthen këto metoda në React Hooks.

Çfarë është cikli i jetës së komponentit React?

Ashtu si njerëzit, komponentët React kalojnë nëpër ciklet e tyre të jetës. Këto cikle jete përbëhen nga disa faza të ndryshme që mund të manipulohen për të ekzekutuar kodin në periudha të ndryshme të ekzistencës së komponentit. Çdo fazë vjen me metodat e veta të ciklit të jetës, të cilat përdoren për të ekzekutuar kodin në kohë specifike në program.

Metodat e ciklit të jetës vijnë në katër kategori kryesore:

  1. Montimi

2. Përditësohet

3. Kufijtë e gabimit

4. Çmontimi

Mund të thuash se montimi përbën lindjen e komponentëve, çmontimin e vdekjes së tij dhe çdo gjë në mes si rritjen e saj. Së pari, komponenti krijohet dhe montohet në DOM. Pasi të jetë vendosur, mund t'i nënshtrohet përditësimeve të shkaktuara nga ndryshimet në state dhe props, përpara se të çmontohet nga DOM.

Konstruktori ( )

constructor() është metoda e parë e përdorur gjatë ciklit jetësor të komponentit. Ai thirret automatikisht për të initalizuar gjendjen dhe për të lidhur çdo përpunues të ngjarjeve në një komponent të klasës. Duke supozuar se ju tashmë dini se si të përdorni konstruktorin në një komponent të klasës React, këtu është një shembull i shpejtë:

Gjëja më e rëndësishme që duhet të dini për konstruktorin (në kontekstin e ciklit jetësor të React) është se NUK është vendi për të prezantuar ndonjë *efekt anësor. E njëjta gjë vlen edhe për Render() që është një funksion i pastër, që do të thotë se nuk mund të ndryshoni gjendjen ose të kryeni ndonjë funksion asinkron brenda tij. Këtu janë të dobishme metodat e tjera të ciklit jetësor.

*Efektet anësore: Çdo gjë që ndodh jashtë vlerës së kthimit. Thirrjet API, regjistrimi në tastierë dhe thirrja e setTimeout() janë shembuj të efekteve anësore, pasi ato jetojnë përtej ekzekutimit të vlerës së kthimit.

ComponentWillMount ( ) (i vjetëruar)

ComponentWillMount() dikur ishte metoda tjetër e ciklit jetësor dhe thirrej pak përpara metodës render(). React tani e ka zhvlerësuar përdorimin e tij për shkak se shpesh përdoret në mënyrë të pasigurt.

Mund të ketë qenë joshëse për të nisur një kërkesë AJAX këtu, për t'i dhënë thirrjes API një fillim ndërsa ndërfaqja ndërfaqe të ngarkohet. Në përgjithësi është një ide e keqe për ta bërë këtë, pasi mund të rezultojë në gabime.

Praktika më e mirë është të jepni HTML-në përpara se të dërgoni një kërkesë për të dhëna, pasi lejon që UI-ja e skeletit të ngarkojë dhe të sigurojë një tregues ngarkimi për t'i treguar përdoruesit se faqja është në rrugën e saj. Në mënyrë të ngjashme, nëse keni një aplikacion me të dhëna që ndryshon çdo disa sekonda, nuk dëshironi që një ndryshim në të dhëna të shkaktojë një rikthim sa herë që përditësohet.

ComponentDidMount( )

Metoda tjetër e ciklit jetësor është componentDidMount(), e cila funksionon menjëherë pasi render() të përfundojë dhe komponenti të jetë montuar në DOM. Është vendndodhja më e mirë për inicimin e një funksioni asinkron. Këtu është një shembull bazë se si mund të merrni të dhëna në një komponent të klasës:

Marrja e të dhënave me React Hooks

Me lëshimin e React 16.8, efektet anësore të tilla si marrja e të dhënave nuk duhet të vendosen nën metodat e ciklit jetësor në një komponent të klasës "shtetërore". React Hooks u prezantuan për të lejuar zhvilluesit të përdorin veçoritë e gjendjes React dhe ciklit të jetës pa përdorur komponentë të klasës. Hooks ofrojnë një mjet më konciz për vendosjen e gjendjes dhe efekteve anësore në një komponent funksioni.

Grepa useEffect() mund të përdoret në një mënyrë ekuivalente me componentDidMount(), componentDidUpdate() dhe componentWillUnmount(). Me fjalë të tjera, ai trajton funksionet e efekteve anësore. Këtu është shembulli i mësipërm i rifaktoruar në React Hooks:

Ne vetëm duam që useEffect() të ekzekutohet dhe të pastrohet një herë, kështu që një grup varësie mund të kalohet si argumenti i dytë. Ky grup mund të jetë ose bosh, ose mund të përmbajë parametra (gjendje dhe mbështetëse) që kontrollojnë kur ekzekutohet useEffect().

Nëse grupi lihet bosh, atëherë do të funksionojë vetëm një herë në montim. Nëse përfshini parametrat e varësisë, grepa useEffect() do të funksionojë sa herë që një nga këta parametra ndryshohet ose përditësohet. Pa kushtet e varësisë, mund të shkaktohet nga çdo ndryshim në të dhënat e komponentit, gjë që mund të ndodhë mjaft shpesh nëse keni një aplikacion kompleks me shumë mbështetëse.

ComponentDidUpdate( )

Nëse keni një gjendje të bazuar në mbështetëse, mund t'ju duhet të përdorni metodën componentDidUpdate(), e cila thirret menjëherë pasi të ketë ndodhur një përditësim. Përdoreni atë për të përditësuar DOM-in duke krahasuar mbështetësit e mëparshëm me ato aktuale, shihni shembullin më poshtë:

Mos harroni të çmontoni!

Hook useEffect ofron gjithashtu një funksion opsional pastrimi të quajtur componentWillUnmount(), i cili funksionon pak përpara se komponenti të çmontohet. Ju mund ta përdorni këtë metodë për t'u çregjistruar nga efektet anësore ose funksionet e asinkronizimit të nisura në componentDidMount(). Lënia e abonimeve aktive rezulton në një paralajmërim për rrjedhje memorie, prandaj është e rëndësishme të përdorni këtë funksion për të shkatërruar çdo gjë që mund të vazhdojë të funksionojë pasi komponenti të ketë dalë nga DOM.

Këtu është një shembull i një funksioni që thirret sa herë që përdoruesi lëviz. useEffect() ende montohet dhe çmontohet vetëm një herë, kështu që funksioni ynë i pastrimit removeEventListener anulon abonimin e ngjarjes kur komponenti çmontohet.

Kufijtë e gabimeve

Kufijtë e gabimeve janë paksa të ndryshëm pasi ato mund të përdoren vetëm në komponentët e klasës dhe nuk mund të përdoren me Hooks. Kufijtë e gabimeve janë komponentë të klasës që përdorin njërën (ose të dyja) static getDerivedStateFromError() ose componentDidCatch() për të kapur gabimet në pemën e tyre përbërëse fëmijë. Ata kapin gabimet, regjistrojnë gabimin dhe ofrojnë një ndërfaqe mbrapa (për shembull, një buton riprovimi) në vend që të thyejnë të gjithë aplikacionin:

Pasi të përcaktohen, ato mund të përdoren si një komponent i rregullt:

Për një udhëzues më të thelluar për të gjitha metodat e ciklit jetësor, shikoni "Dokumentet zyrtare React".

Botuar fillimisht në http://github.com.