Me rritjen gjithnjë e më të madhe të popullaritetit të React Hooks midis zhvilluesve të React, nuk duhet të jetë befasi kur dikush dyshon në rëndësinë e të mësuarit të ciklit jetësor të komponentëve të reaksionit aktualisht. Por ndërsa dikush mund të mos e konsiderojë të rëndësishëm, rëndësia e të mësuarit të ciklit jetësor të komponentit React ekziston ende. Kuptimi i ciklit jetësor të një komponenti React ka shumë rëndësi. Disa prej tyre janë si më poshtë:
- Kodi i trashëgimisë: Disa kompani kanë ende projektet e tyre React që përdorin komponentë të klasës dhe të kuptuarit e ciklit jetësor të komponentit për mirëmbajtjen dhe përditësimin e tyre është ende thelbësore.
- Korrigjimi: Për të diagnostikuar dhe rregulluar çështjet që lidhen me optimizimin e performancës dhe sjelljen e papritur, është i nevojshëm kuptimi i metodave të ciklit jetësor.
- Sjellja komplekse: Për logjikën dhe ndërveprimet komplekse, është ende e dobishme të kuptohet cikli i jetës së komponentit të reaksionit në arritjen e sjelljes së dëshiruar, veçanërisht kur detyra bëhet e vështirë për t'u kryer me grepa.
- Kuptimi më i mirë i React: Kuptimi i ciklit jetësor të komponentit jep një pasqyrë më të thellë dhe më të plotë se si funksionon React dhe se si komponentët ndërveprojnë me njëri-tjetrin, duke çuar në një kuptim më të mirë të përgjithshëm të bibliotekës.
Cikli i jetës së një komponenti në React ka tre faza. Ata janë:
- Faza e montimit,
- Faza e përditësimit dhe
- Faza e çmontimit
1. Faza e montimit
Kjo është faza e parë e një komponenti reagues ku fillon cikli i jetës së komponentit. Komponenti React i shtohet modelit të objektit të dokumentit (DOM) në këtë fazë. Ai thirret vetëm një herë në ciklin jetësor të komponentit.
Kur montoni një komponent në DOM, React ofron tre metoda kryesore të integruara të cilat ekzekutohen në rregull. Tre metodat kryesore janë:
- constructor(): thirret vetëm një herë kur krijohet instanca e klasës. Kjo metodë përdoret për inicializimin e vetive dhe gjendjes së atij shembulli.
- render(): Komponenti jepet në DOM virtual.
- componentDidMount(): Kjo metodë thirret pasi komponenti të jepet në DOM. Është i përshtatshëm për të bërë thirrje AJAX dhe API.
Një shembull i kombinuar duke përdorur tre metodat e mësipërme është dhënë më poshtë:
//Filename: App.js
import React from 'react'
import Counter from './Counter';
class App extends React.Component {
constructor() {
super()//calling the constructor of the parent class
console.log('Constructor called.')
}
componentDidMount() {
console.log('Component mounted.')
}
render() {
console.log('App rendered in the virtual DOM.')
return (
<div>
<Counter />
</div>
);
}
}
export default App
Prodhimi: Konstruktori thirret. Aplikacioni i dhënë në DOM virtual. Komponenti i montuar.
2. Faza e përditësimit
Në fazën e përditësimit, komponenti ri-renderohet me vlerën e re. Ky përditësim shkaktohet nga ndryshimi i vlerës së mbështetëses ose përditësohet gjendja e komponentit. Kjo fazë mund të ndodhë aq herë sa përditësohet mbështetja ose gjendja e komponentit. Kur përditëson një komponent në DOM, React ofron dy metoda kryesore të integruara, të cilat gjithashtu ekzekutohen sipas rregullit. Metodat janë:
- render(): thirret kur komponenti përditësohet. Kur komponenti përditësohet, React e rishfaq komponentin me vlerën e përditësuar.
- componentDidUpdate(): Kjo metodë thirret kur ka një përditësim në props ose gjendjen e komponentit. Ne mund të krahasojmë vlerën e mbështetësve dhe gjendjes së re me vlerat e vjetra, dhe nëse ka një ndryshim në vlera, ne mund të bëjmë thirrje AJAX dhe API në mënyrë që të zbatojmë efektin e ndryshimit në gjendjen ose mbështetësit. Ajo thirret pas metodës render.
Një shembull i fazës së përditësimit është dhënë më poshtë:
//Filename: Counter.js
import React from 'react'
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
show: true,
};
}
componentDidUpdate() {
console.log('Component is Updated.');
}
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
handleDecrement = () => {
this.setState({ count: this.state.count - 1 });
};
delHeader = () => {
this.setState({ show: false });
}
render() {
console.log('Counter rendered.');
return (
<div>
<h1>Counter</h1>
<button onClick={this.handleIncrement}> + </button>
<h1>{this.state.count}</h1>
<button onClick={this.handleDecrement}> - </button>
<br /><br />
<br />
</div>
);
}
}
export default Counter
Kur numërimi rritet ose zvogëlohet, vlera e gjendjes ndryshohet dhe komponenti përditësohet dhe riprodhohet.
Dalja: numëruesi i dhënë.
Komponenti është përditësuar.
3. Faza e çmontimit
Në këtë fazë, cikli i jetës së komponentit reagues përfundon. Çmontimi i një komponenti ndodh kur komponenti hiqet nga DOM.
Metoda e integruar e quajtur gjatë fazës së çmontimit është:
- componentWillUnmount(): Ky funksion thirret përpara se komponenti të hiqet (çmontohet) nga DOM. Kjo është faza përfundimtare e ciklit jetësor të një komponenti dhe thirret vetëm një herë në ciklin jetësor të komponentit.
//Filename: Unmount.js
import React from "react";
class Container extends React.Component {
constructor(props) {
super(props);
this.state = { show: true };
}
delHeading = () => {
this.setState({ show: false });
}
render() {
let myHeading;
if (this.state.show) {
myHeading = <Child />;
};
return (
<div>
{myHeading}
<button type="button" onClick={this.delHeading}>Delete Heading</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
console.log("The component is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
export default Container
Dalja për Çmontimin: Komponenti është gati për t'u çmontuar.
Megjithëse React ofron disa grepa të tjerë të ciklit të jetës, grepa të mësipërme të ciklit jetësor janë grepa të ciklit jetësor të përdorura shpesh dhe grepa të tjera që janë hequr në këtë artikull rrallë do të hyjnë në përdorim.
