Реагирайте жизнения цикъл - Различни фази на реагиращия жизнен цикъл с примери

Въведение в Реактивния жизнен цикъл

Тъй като знаем, че компонентите са основни градивни елементи на реакцията, важно е да се знае за различните етапи, участващи в жизнения цикъл на реагиращия компонент. В тази статия ще опишем различните събития и методи, участващи в жизнения цикъл на компонента. Също така ще разгледаме някои примери, които ще дадат ясна картина на жизнения цикъл на компонента React.

Фази на жизнения цикъл на реагирането

Жизненият цикъл на компонентите се определя като последователност от методи, извиквани в различни етапи на компонента. Следните са различни фази, участващи в жизнения цикъл на реагиращия компонент:

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

Този етап изисква програмистът да определи свойствата и първоначалното състояние на компонента. Това се прави в конструктора на компонента. Следващият код показва фазата на инициализация на реактивен компонент:

Код:

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

2. Монтаж

Монтирането е фазата на жизнения цикъл на реакцията, която идва след приключване на инициализацията. Монтирането се извършва, когато компонентът се постави на контейнера DOM и компонентът се изобразява на уеб страница. Фазата на монтаж има два метода, които са:

• compnentWillMount () : Този метод се извиква точно преди компонентът да бъде поставен на DOM, че тази функция се извиква точно преди функцията за изобразяване да се изпълни за първи път.
• компонентDidMount () : Този метод се извиква веднага след поставянето на компонента в DOM, че тази функция се извиква непосредствено след изпълнение на функцията за изобразяване. За първи път.

От името на горните два метода разбрахме значението на ключовите думи „Воля“ и „Направо“. Вече е ясно, че „Will“ се използва за преди конкретно събитие, а „did“ се използва в случай на конкретно събитие.

3. Актуализация

Актуализацията е фаза, при която състоянието и свойствата, попълнени по време на инициализация, се променят, ако се налага след някои потребителски събития. Следните са различни функции, извикани по време на фаза на актуализиране:

• компонентWillReceiveProps (): Тази функция не зависи от състоянието на компонента. Този метод се извиква преди компонент, който е монтиран на DOM, да пренасочи реквизита си. Функцията приема нови подпори, които могат да бъдат идентични или различни от оригиналните подпори. На този етап могат да се прилагат предимно чекове за предварително изобразяване.
• shouldComponentUpdate (): Понякога е желателно да не се показват новите реквизити на изходната страница. За да постигне това, този метод връща невярно, което означава, че новопредадените реквизити не трябва да се показват на изходната страница.
• компонентWillUpdate (): Тази функция се извиква преди компонентът да бъде рендериран, т.е. този метод се извиква веднъж преди функцията за изобразяване да бъде изпълнена след актуализация.
• компонентDidUpdate (): Тази функция се извиква след повторно представяне на компонент, който се извиква този метод веднъж след изпълнение на функцията за изобразяване след актуализация.

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

Това е последната фаза в жизнения цикъл на компонента и в тази фаза компонент се отделя от DOM контейнера . Следният метод попада в тази фаза.

• компонентWillUnmount (): Тази функция се извиква преди компонент окончателно да се отдели от DOM контейнера, който се извиква този метод, когато компонент бъде напълно премахнат от страницата и това показва края на жизнения й цикъл.

Пример за реактивен жизнен цикъл

Тук ще видим някои примери за кодове, показващи жизнения цикъл на реагиращия компонент.

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'));

Когато горната програма се изпълни първоначално, тя ще покаже по-долу изхода на уеб страницата.

При щракване върху Кликнете тук, текстът ще се промени в следното:

Сега на конзолата можете да видите последователността от наречени методи, конзолата ще покаже прикрепения по-долу изход:

След кликване върху екрана ще се извърши повторно изобразяване и ще покаже следното в конзолата:

Горният изход на конзолата дава ясно разбиране на методите на жизнения цикъл на реакцията, извикани по време на жизнения цикъл на реагиращия компонент.

заключение

След като обхване подробности за различните фази, участващи в жизнения цикъл на реакцията, е ясно, че има методи на жизнения цикъл, които се извикват автоматично. Тези методи на жизнения цикъл на различни фази на компонента ни дават свобода да изпълняваме персонализирани събития, когато компонент е създаден, актуализиран или унищожен. Освен това тези методи ни позволяват да боравим с реквизити и промени в състоянието, както и лесно да интегрираме библиотеки на трети страни.

Препоръчителни статии

Това е ръководство за жизнения цикъл на React. Тук обсъждаме фазите на жизнения цикъл на реакцията като инициализация, монтиране, актуализиране и демонтиране заедно с примера. Можете също да разгледате следните статии, за да научите повече -

1. React Native vs React
2. Agile жизнен цикъл
3. Жизнен цикъл на ITIL
4. Инструменти за разполагане на Java
5. Ръководство за бутон в React Native