Стадії та методи життєвого циклу React-компонента

Життєвий цикл компонента react – це ключова концепція, що дає змогу розробникам керувати станом і поведінкою компонентів на різних етапах їхнього існування.

Кожен компонент проходить через кілька фаз, починаючи з його створення і закінчуючи знищенням, включно з такими важливими етапами, як монтування, оновлення та розмонтування. Розуміння життєвого циклу допомагає розробникам оптимізувати продуктивність застосунків, контролюючи, коли і як виконуються певні дії, як-от запити до API, оновлення стану або маніпуляції з DOM. Це вкрай важливо для розв’язання таких завдань, як мінімізація непотрібних перемальовок, управління асинхронними діями та ефективне оновлення користувацького інтерфейсу. Використовуючи методи життєвого циклу, розробники можуть створювати більш чуйні та ефективні додатки, що в кінцевому підсумку покращує користувацький досвід і спрощує процес налагодження.

Прочитайте цю статтю від онлайн школи FoxmindEd і дізнайтеся про методи життєвого циклу react компонента докладніше.

Що таке життєвий цикл компонента?

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

1. Монтування – це процес створення компонента і його вставки в DOM. На цьому етапі виконуються методи constructor, render, а також componentDidMount, який дає змогу виконувати запити до API та інші операції, які потребують доступу до елементів DOM.
2. Оновлення відбувається, коли компонент отримує нові властивості або відбувається зміна стану. На цій стадії спрацьовують методи shouldComponentUpdate, render та componentDidUpdate, що дають змогу розробнику оптимізувати продуктивність, запобігти зайвим рендери та реагувати на зміни.
3. Розмонтування завершує життєвий цикл компонента, коли він видаляється з DOM. Метод componentWillUnmount надає можливість очистити таймери, скасувати підписки або інші ресурси, щоб уникнути витоків пам’яті.

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

Основні стадії життєвого циклу компонента

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

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

На цій стадії відбувається створення компонента. Це перший етап, коли компілятор React встановлює початкові значення стану і встановлює властивості. На цьому етапі використовується конструктор компонента (constructor), який дає змогу розробнику ініціалізувати стан за допомогою this.state і пов’язувати методи (наприклад, використовуючи this.method = this.method.bind(this)).

Приклад:

class MyComponent extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            counter: 0

        };

    }

}

Монтування

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

• render: Цей метод відповідає за відображення компонента. Він формує JSX, який буде відмальований на екрані.
• componentDidMount: Цей метод викликається одразу після того, як компонент було вставлено в DOM. Зазвичай у цьому місці виконуються асинхронні завдання, такі як запити до API, підписка на події або налаштування таймерів.

Приклад:

componentDidMount() {

    fetch('/api/data')

        .then(response => response.json())

        .then(data => this.setState({ data }));

}

Оновлення

Компоненти можуть оновлюватися з кількох причин: зміни стану, отримання нових властивостей від батьківського компонента або виклик методу forceUpdate. Етап оновлення включає в себе кілька методів життєвого циклу:

• shouldComponentUpdate: Цей метод дає змогу контролювати, чи повинен компонент оновлюватися. Якщо він повертає false, процес оновлення зупиниться, що може поліпшити продуктивність.
• render: Знову викликається для повторного відтворення компонента, враховуючи зміни стану або властивостей.
• componentDidUpdate: Викликається після оновлення. Цей метод можна використовувати для виконання операцій, які вимагають доступу до DOM після оновлення.

Приклад:

shouldComponentUpdate(nextProps, nextState) {

    return nextState.counter !== this.state.counter;

}

Розмонтування

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

Приклад:

componentWillUnmount() {

    clearInterval(this.timer);

}

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

FoxmindEd – це навчальний центр, що має велику різноманітність напрямків курсів для новачків та програмістів з досвідом!

Тільки починаєте свій шлях в ІТ? Спробуйте курси Start

Вже маєте базові навички програмування? Тоді
курси Junior саме для вас.

Хочете поглибити свої знання в ІТ? Ми маємо курси Middle/Senior

Методи життєвого циклу в класових компонентах

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

• constructor(props)

Конструктор – це перший метод, який викликається під час створення екземпляра компонента. Він використовується для ініціалізації локального стану, а також для прив’язки методів до контексту this. Важливо викликати super(props) перед будь-якими операціями з this, щоб забезпечити доступ до властивостей батьківського класу.

Приклад використання:

class MyComponent extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            count: 0

        };

    }

}

• componentDidMount()

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

Приклад використання:

componentDidMount() {

    fetch('https://api.example.com/data')

        .then(response => response.json())

        .then(data => this.setState({ data }));

}

• shouldComponentUpdate(nextProps, nextState)

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

Приклад використання:

shouldComponentUpdate(nextProps, nextState) {

    return nextProps.value !== this.props.value; // тільки оновлення якщо нове значення відрізняється

}

• componentDidUpdate(prevProps, prevState)

Цей метод викликається відразу після оновлення компонента і його перемальовування. Він дає можливість виконувати додаткові операції, як-от мережеві запити, які залежать від попередніх властивостей або стану. Крім того, тут можна оновити локальний стан на підставі зміни даних, що надійшли.

Приклад використання:

componentDidUpdate(prevProps, prevState) {

    if (prevProps.userId !== this.props.userId) {

        this.fetchUserData(this.props.userId);

    }

}

• componentWillUnmount()

Метод componentWillUnmount викликається безпосередньо перед видаленням компонента з DOM. Це місце, де слід виконувати операції очищення, такі як скасування підписок і очищення таймерів, щоб уникнути витоку пам’яті.

Приклад використання:

componentWillUnmount() {

    this.clearInterval(); // перевизначення тайм-ауту

}

Додаткові методи життєвого циклу

Крім вищеописаних, існують й інші методи, такі як:

• getDerivedStateFromProps(nextProps, prevState): Використовується для оновлення стану на основі змін властивостей. Викликається перед render.
• getSnapshotBeforeUpdate(prevProps, prevState): Дозволяє зберегти інформацію про стан перед тим, як зміни будуть відображені в DOM. Цей метод також викликається перед componentDidUpdate.

Методи життєвого циклу react класових компонентів надають потужний інструмент для управління станом і поведінкою додатків. Розуміння кожного з методів і їхнє правильне використання дає змогу створити оптимізованіші та керованіші компоненти, що згодом покращує продуктивність і користувацький досвід. Необхідно враховувати, що із запровадженням хуків у функціональних компонентах деякі з цих методів стають менш актуальними, однак знання про них залишається важливим для роботи з наявними проєктами на класифікованих компонентах.

Життєвий цикл у функціональних компонентах із хуками

З переходом до функціональних компонентів у React розробники отримали потужний інструмент для створення компонентів, що використовують хуки. Хуки дають нам змогу керувати станом і ефектами у функціональних компонентах, імітуючи водночас методи життєвого циклу, що використовувалися в класових компонентах. Розглянемо основні хуки, які дають змогу керувати життєвим циклом компонентів: useState, useEffect і useRef.

• useState

Хук useState дозволяє додавати стан у функціональні компоненти. Він приймає початкове значення стану і повертає масив, що складається з поточного значення стану і функції, що дозволяє його оновити.

Приклад використання:

import React, { useState } from 'react';

const Counter = () => {

    const [count, setCount] = useState(0);

    return (

        <div>

            <p>Текущий счет: {count}</p>

            <button onClick={() => setCount(count + 1)}>Збільшити</button>

        </div>

    );

};

У цьому прикладі хук useState дозволяє відстежувати кількість натискань на кнопку. Щоразу, коли викликається функція setCount, компонент перемальовується з оновленим значенням стану.

• useEffect

Хук useEffect є заміною методів життєвого циклу, таких як componentDidMount, componentDidUpdate і componentWillUnmount. Він дає змогу виконувати побічні ефекти у функціональних компонентах, як-от завантаження даних, підписка на події або очищення ресурсів.

Приклад використання:

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {

    const [data, setData] = useState([]);

    useEffect(() => {

        fetch('https://api.example.com/data')

            .then(response => response.json())

            .then(data => setData(data));

        return () => {

            // Очищення, якщо необхідно

        };

    }, []); // Порожній масив означає, що ефект виконується тільки один раз

    return (

        <div>

            <h1>Fetched Data</h1>

            <ul>

                {data.map(item => (

                    <li key={item.id}>{item.name}</li>

                ))}

            </ul>

        </div>

    );

};

У цьому прикладі useEffect виконується один раз під час монтування компонента, що аналогічно поведінці componentDidMount у класових компонентах. Другий аргумент (порожній масив) вказує на те, що ефект не залежить від будь-яких значень і має виконуватися тільки під час першого рендерингу.

• useRef

Хук useRef дає змогу зберігати змінювані значення, які не спричиняють повторного рендерінгу компонента під час зміни. Це може бути корисно для зберігання посилань на DOM-елементи або для зберігання будь-яких змінних даних без повторного рендерингу.

Приклад використання:

import React, { useRef } from 'react';

const InputFocus = () => {

    const inputRef = useRef(null);

    const focusInput = () => {

        inputRef.current.focus(); // Фокус на input

    };

    return (

        <div>

            <input ref={inputRef} type="text" />

            <button onClick={focusInput}>Фокус на полі введення</button>

        </div>

    );

};

Тут useRef використовується для отримання посилання на елемент введення. Під час натискання на кнопку focusInput викликається метод focus() для встановлення фокусу на поле введення.

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

Висновок

Освоєння хуків і вміння коректно керувати станом і побічними ефектами дають змогу розробникам створювати більш інтуїтивно зрозумілі та продуктивні інтерфейси!