Реацт Лифецицле - Различите фазе животног циклуса реакције са примерима

Увод у реактивни животни циклус

Како знамо да су компоненте основни грађевни блокови реакције, важно је знати о различитим фазама које су укључене у животни циклус реактивне компоненте. У овом чланку ћемо описати различите догађаје и методе који су укључени у животни циклус компоненте. Такође ћемо покрити неке примере који ће дати јасну слику животног циклуса компоненти Реацт.

Фазе реактивног животног циклуса

Животни циклус компоненти је дефиниран као редослијед метода које се позивају у различитим фазама компоненте. Следе различите фазе које су укључене у животни циклус реактивне компоненте:

1. Иницијализација

Ова фаза захтева од програмера да дефинише својства и почетно стање компоненте. То се ради у конструктору компоненте. Следећи код приказује фазу иницијализације реактивне компоненте:

Шифра:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Монтажа

Монтажа је фаза реактивног животног циклуса која долази након завршетка иницијализације. Монтажа се догађа када се компонента постави на ДОМ спремник и компонента се прикаже на веб страници. Фаза монтаже има две методе које су:

• цомпнентВиллМоунт () : Ова метода се позива непосредно прије него што се компонента постави на ДОМ, а ова се функција позива непосредно прије извршења функције приказивања.
• компонентаДидМоунт () : Ова метода се позива одмах након што је компонента постављена на ДОМ, а ова функција се позива непосредно након извршења функције рендера. Први пут.

Из назива горе поменуте две методе схватили смо значај кључних речи „Воља“ и „Јесте“. Сада је јасно да се „воља“ користи пре одређеног догађаја, а „јесте“ се користи у случају након одређеног догађаја.

3. Ажурирање

Ажурирање је фаза у којој се стање и својства попуњена у време иницијализације мењају ако се захтевају након неких корисничких догађаја. Следе различите функције које се позивају током фазе ажурирања:

• компонентаВиллРецеивеПропс (): Ова функција није зависна од стања компоненте. Ова метода се позива пре него што компонента која је монтирана на ДОМ добије репризу. Функција прихвата нове реквизите који могу бити идентични или различити од оригиналних реквизита. У овом се кораку углавном могу примијенити неке провјере прије приказивања.
• требаЦомпонентУпдате (): Понекад је пожељно да се нови реквизити не приказују на излазној страници. Да би се то постигло, ова метода враћа лажну, што значи да новоотворени реквизити не би требали бити приказани на излазној страници.
• компонентаВиллУпдате (): Ова функција се позива прије поновног приказивања компоненте, односно ова метода се позива једном прије извршавања функције приказивања након ажурирања.
• компонентаДидУпдате (): Ова функција се позива након поновног приказивања компоненте, односно ова метода се позива једном након извршења функције приказивања након ажурирања.

4. Демонтирање

Ово је последња фаза у животном циклусу компоненти и у овој фази је компонента одвојена од ДОМ спремника . Следећа метода спада у ову фазу.

• компонентаВиллУнмоунт (): Ова функција се активира прије него што се компонента коначно одвоји од ДОМ спремника. Ова метода се позива када је компонента потпуно уклоњена са странице, а то показује крај њеног животног циклуса.

Пример животног циклуса Реацт

Овде ћемо видети неколико примера кода који приказују животни циклус реактивне компоненте.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Када се горњи програм покрене на почетку, он ће приказати доњи излаз на веб страници.

Када кликнете на област Овде, текст ће се променити у следеће:

Сада на конзоли можете видети редослед позваних метода, а на конзоли ће се појавити испод прикључени излаз:

Након клика на екрану одвијаће се рендерирање и на конзоли ће бити приказано следеће:

Горњи излаз конзоле даје јасно разумевање метода животног циклуса реакције позваних током животног циклуса реактивне компоненте.

Закључак

Након покривања детаља о различитим фазама укљученим у животни циклус реакције, јасно је да постоје методе животног циклуса које се аутоматски зову. Ове методе животног циклуса у различитим фазама компоненте дају нам слободу да изводимо прилагођене догађаје када се компонента креира, ажурира или уништи. Штавише, ове методе нам омогућују једноставно руковање реквизитима и променама стања, као и лако интегрисање библиотека трећих страна.

Препоручени чланци

Ово је водич за Реацт животни циклус. Овде смо расправљали о фазама животног циклуса реакције као што су иницијализација, монтажа, ажурирање и демонтажа заједно са примером. Такође можете погледати следеће чланке да бисте сазнали више -

1. Реацт Нативе вс Реацт
2. Агиле Лифецицле
3. ИТИЛ животни циклус
4. Јава Деплоимент Тоолс
5. Водич за дугме у Реацт Нативе