Як зрозуміти методи життєвого циклу компонента в ReactJS

У цій статті ми збираємось вивчити методи життєвого циклу ReactJS. Але перш ніж переходити до різних методів життєвого циклу React, нам слід зрозуміти, що це таке.

Як ми знаємо, все у цьому світі йде по циклі (скажімо, люди чи дерева). Ми народжуємося, зростаємо, а потім помираємо. Майже все йде за цим циклом у своєму житті, а також компоненти React. Компоненти створюються (монтуються на DOM), зростають шляхом оновлення, а потім відмирають (демонтуються на DOM). Це називається життєвим циклом компонента.

Існують різні методи життєвого циклу, які React забезпечує на різних етапах життя компонента. React автоматично викликає відповідальний метод відповідно до фази, на якій знаходиться компонент. Ці методи дають нам кращий контроль над нашим компонентом, і ми можемо ними маніпулювати, використовуючи ці методи.

В даний час ми знаємо, що таке методи життєвого циклу і чому вони важливі. То що це за різні методи? Давайте подивимось на них.

Методи життєвого циклу

Життєвий цикл компонента в основному класифікується на чотири частини:

  • ініціалізація
  • кріплення
  • оновлення та
  • демонтаж .

Давайте обговоримо різні методи життєвого циклу, доступні на цих різних етапах (тобто ініціалізація, монтаж, оновлення та демонтаж).

Ініціалізація

Це фаза, на якій компонент збирається розпочати свій шлях шляхом налаштування стану (див. Нижче) та реквізиту. Зазвичай це робиться всередині методу конструктора (див. Нижче, щоб краще зрозуміти фазу ініціалізації).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

Кріплення

Назва сама собою пояснюється. Монтаж - це фаза, на якій наш компонент React монтується на DOM (тобто створюється та вставляється в DOM).

Ця фаза виходить на сцену після завершення фази ініціалізації. На цьому етапі наш компонент відображається вперше. На цьому етапі доступні методи:

1. componentWillMount ()

Цей метод викликається безпосередньо перед тим, як компонент монтується на DOM або викликається метод render. Після цього методу компонент монтується.

Примітка: Ви не повинні робити виклики API або будь-які зміни даних, використовуючи this.setstate у цьому методі, оскільки він викликається перед методом візуалізації. Отже, з DOM нічого не можна зробити (тобто оновлення даних за допомогою відповіді API), оскільки він не змонтований. Отже, ми не можемо оновити стан за допомогою відповіді API.

2. componentDidMount ()

Цей метод викликається після монтажу компонента на DOM. Як і componentWillMount, він викликається один раз у життєвому циклі. Перед виконанням цього методу викликається метод візуалізації (тобто ми можемо отримати доступ до DOM). Ми можемо здійснювати виклики API та оновлювати стан за допомогою відповіді API.

Подивіться, щоб зрозуміти ці методи монтажу:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

Оновлення

Це третя фаза, через яку проходить наш компонент. Після фази монтажу, де компонент був створений, на сцену виходить етап оновлення. Тут змінюється стан компонента, отже, відбувається повторний візуалізація.

На цьому етапі дані компонента (стану та реквізиту) оновлюються у відповідь на події користувача, такі як клацання, введення тексту тощо. Це призводить до повторного відтворення компонента. На цьому етапі доступні методи:

  1. shouldComponentUpdate ()

Цей метод визначає, чи слід оновлювати компонент чи ні. За замовчуванням він повертає true. Але в якийсь момент, якщо ви хочете повторно відтворити компонент за якихось умов, тоді слід вибрати методComponentUpdate.

Припустимо, наприклад, ви хочете повторно відтворити свій компонент лише тоді, коли змінюється властивість - тоді використовуйте потужність цього методу. Він отримує такі аргументи, як nextProps і nextState, які допомагають нам вирішити, чи робити повторний візуалізацію шляхом порівняння з поточним значенням властивості.

2. componentWillUpdate ()

Як і інші методи, його назва також сама собою пояснюється. Він викликається до того, як відбудеться повторний візуалізація компонента. Він викликається один раз після методу ' shouldComponentUpdate '. Якщо ви хочете виконати певні обчислення перед повторною візуалізацією компонента та після оновлення стану та prop, тоді це найкраще місце для цього. Як і метод 'shouldComponentUpdate', він також отримує такі аргументи, як nextProps та nextState.

3. ComponentDidUpdate ()

Цей метод викликається відразу після повторного відтворення компонента. Після оновлення нового (оновленого) компонента в DOM виконується метод ' componentDidUpdate '. Цей метод отримує такі аргументи, як prevProps і prevState.

Погляньте, щоб краще зрозуміти методи оновлення:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Демонтування

Це остання фаза у життєвому циклі компонента. Як видно з назви, на цьому етапі компонент демонтується з DOM. На цьому етапі доступний метод:

1. componentWillUnmount ()

Цей метод викликається до того, як відбудеться демонтаж компонента. Перед видаленням компонента з DOM виконується ' componentWillUnMount' . Цей метод позначає кінець життєвого циклу компонента.

Ось блок-схема представлення методів життєвого циклу:

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

Thanks!