Реагувати життєвий цикл - Різні фази життєвого циклу реагування з прикладами

Вступ до життєвого циклу реагування

Оскільки ми знаємо, що компоненти є основними будівельними блоками реагування, важливо знати про різні етапи, що беруть участь у життєвому циклі реагуючого компонента. У цій статті ми розповімо про різні події та методи, що беруть участь у життєвому циклі компонента. Також ми розглянемо кілька прикладів, які дадуть чітку картину життєвого циклу компонентів 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, тобто ця функція викликається відразу після виконання функції візуалізації. Вперше.

З назви двох вищевказаних методів ми зрозуміли значення ключових слів «Воля» та «Зробив». Зараз вже зрозуміло, що "Воля" використовується до певної події, а "зробила" використовується у випадку після конкретної події.

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. Спритний життєвий цикл
3. Життєвий цикл ITIL
4. Інструменти розгортання Java
5. Керівництво по кнопці в React Native