Розуміння стану та життєвого циклу в React
Вступ
Стан і життєвий цикл — це два основні концепти в React, які становлять основу для створення динамічних, інтерактивних веб-додатків. Стан відноситься до даних або властивостей, які визначають поведінку компонента, тоді як життєвий цикл охоплює етапи, через які компонент проходить під час свого існування — від монтування до демонтування. Разом ці два концепти дозволяють розробникам React створювати чутливі та ефективні користувацькі інтерфейси.
У цій частині серії ми розглянемо роль стану в компонентах React, зануримося в життєвий цикл компонентів і обговоримо, як сучасні функції, такі як hooks, змінили управління станом та обробку життєвих циклів.
Що таке стан у React?
У React стан — це об'єкт, який зберігає динамічні дані та визначає, як компонент поводиться та рендериться. На відміну від пропсів, які передаються в компонент і є незмінними, стан є внутрішнім для компонента і може бути оновлений під час його життєвого циклу. Коректне управління станом є критичним для створення інтерактивних додатків, де UI змінюється динамічно у відповідь на введення користувача, відповіді сервера або інші тригери.
Використання стану в класових компонентах
Раніше стан в React керувався через класові компоненти. Щоб визначити стан, його ініціалізують у конструкторі компонента і оновлюють за допомогою методу setState().
Приклад:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
Count: {this.state.count}
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
У цьому прикладі стан count ініціалізується значенням 0 і оновлюється за допомогою методу setState(), коли натискається кнопка "Increment". React рендерить компонент заново, щоб відобразити оновлений стан.
Управління станом за допомогою функціональних компонентів та Hooks
З введенням React Hooks у версії 16.8, управління станом стало простішим і більш інтуїтивно зрозумілим. Hooks дозволяють використовувати стан та інші функції React у функціональних компонентах, що усуває необхідність у класових компонентах.
Hook useState є найбільш використовуваним hook для управління станом у функціональних компонентах.
Приклад:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
Count: {count}
<button onClick={increment}>Increment</button>
</div>
);
};
Тут useState використовується для оголошення стану count та функції (setCount) для його оновлення. Такий підхід є чистішим, легшим для читання і добре відповідає сучасній розробці в React.
Розуміння життєвого циклу компонента в React
Життєвий цикл компонента в React описує серію подій, що відбуваються під час існування компонента. Він складається з трьох основних фаз:
- Монтування: коли компонент вперше рендериться в DOM.
- Оновлення: коли стан чи пропси компонента змінюються, що призводить до повторного рендерингу.
3.
Розуміння стану та життєвого циклу в React
Вступ
Стан і життєвий цикл — це два основні концепти в React, які формують основу для створення динамічних, інтерактивних веб-додатків. Стан відноситься до даних або властивостей, які визначають поведінку компонента, в той час як життєвий цикл охоплює етапи, через які компонент проходить під час свого існування, від монтування до демонтування. Разом ці концепти дозволяють розробникам React створювати чутливі та ефективні користувацькі інтерфейси.
У цій частині серії ми розглянемо роль стану в компонентах React, поглибимося в життєвий цикл компонентів і обговоримо, як сучасні функції, такі як hooks, змінили управління станом та обробку життєвих циклів.
Що таке стан у React?
У React стан — це об'єкт, який зберігає динамічні дані та визначає, як компонент поводиться та рендериться. На відміну від пропсів, які передаються в компонент і є незмінними, стан є внутрішнім для компонента і може бути оновлений під час його життєвого циклу. Коректне управління станом є критичним для створення інтерактивних додатків, де UI змінюється динамічно у відповідь на введення користувача, відповіді сервера або інші тригери.
Використання стану в класових компонентах
Раніше стан в React керувався через класові компоненти. Щоб визначити стан, його ініціалізують у конструкторі компонента і оновлюють за допомогою методу setState().
Приклад:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
Count: {this.state.count}
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
У цьому прикладі стан count ініціалізується значенням 0 і оновлюється за допомогою методу setState(), коли натискається кнопка "Increment". React рендерить компонент заново, щоб відобразити оновлений стан.
Управління станом за допомогою функціональних компонентів та Hooks
З введенням React Hooks у версії 16.8, управління станом стало простішим і більш інтуїтивно зрозумілим. Hooks дозволяють використовувати стан та інші функції React у функціональних компонентах, що усуває необхідність у класових компонентах.
Hook useState є найбільш використовуваним hook для управління станом у функціональних компонентах.
Приклад:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
Count: {count}
<button onClick={increment}>Increment</button>
</div>
);
};
Тут useState використовується для оголошення стану count та функції (setCount) для його оновлення. Такий підхід є чистішим, легшим для читання і добре відповідає сучасній розробці в React.
Розуміння життєвого циклу компонента в React
Життєвий цикл компонента в React описує серію подій, що відбуваються під час існування компонента. Він складається з трьох основних фаз:
- Монтування: коли компонент вперше рендериться в DOM.
- Оновлення: коли стан чи пропси компонента змінюються, що призводить до повторного рендерингу.
- Демонтування: коли компонент видаляється з DOM.
Методи життєвого циклу в класових компонентах
Класові компоненти мають конкретні методи життєвого циклу, через які можна "підключитися" до цих фаз:
Монтування:
constructor(): Ініціалізація стану та прив'язка методів.componentDidMount(): Виконання побічних ефектів, таких як отримання даних або маніпуляції з DOM, після того, як компонент буде змонтовано.
Оновлення:
componentDidUpdate(): Виконання коду у відповідь на зміни в пропсах або стані.
Демонтування:
componentWillUnmount(): Очистка ресурсів, таких як таймери або прослуховувачі подій.
Приклад:
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({ seconds: this.state.seconds + 1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <div>Seconds elapsed: {this.state.seconds}</div>;
}
}
У цьому прикладі таймер починає працювати, коли компонент монтується, і зупиняється, коли компонент демонтується.
Управління життєвим циклом з використанням Hooks
У функціональних компонентах hooks, такі як useEffect, замінюють методи життєвого циклу, надаючи єдиний спосіб для керування побічними ефектами.
Hook useEffect дозволяє виконувати побічні ефекти та очищення у функціональних компонентах. Він може імітувати поведінку методів componentDidMount, componentDidUpdate і componentWillUnmount.
Приклад:
import React, { useState, useEffect } from 'react';
const Timer = () => {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prevSeconds) => prevSeconds + 1);
}, 1000);
return () => clearInterval(interval); // Очищення при демонтажі
}, []);
return <div>Seconds elapsed: {seconds}</div>;
};
Тут hook useEffect запускає таймер, коли компонент монтується, і очищує його, коли компонент демонтується, роблячи функціональний компонент компактним і легким для підтримки.
Кращі практики для управління станом та життєвим циклом
1. Зберігайте стан мінімальним
Уникайте перевантаження компонентів зайвим станом. Додавайте лише ті дані, які безпосередньо впливають на UI. Наприклад, замість збереження похідних значень у стані, обчислюйте їх під час рендерингу.
2. Обережно використовуйте похідний стан
React не рекомендує зберігати похідні значення в стані, якщо це не абсолютно необхідно. Похідні значення часто можна обчислювати динамічно в методі render або функції.
3. Уникайте побічних ефектів під час рендерингу
Переконайтеся, що побічні ефекти, такі як API запити чи підписки, обробляються в методах життєвого циклу (або useEffect), а не під час рендерингу.
4. Розділяйте компоненти
Для кращої підтримуваності розділяйте компоненти з складним станом або кількома методами життєвого циклу на менші, більш цілеспрямовані компоненти.
5. Використовуйте власні Hooks
Інкапсулюйте багаторазову логіку стану у власних hook для того, щоб ваші компоненти залишалися чистими та багаторазовими.
Приклад власного hook:
const useTimer = () => {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prevSeconds) => prevSeconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return seconds;
};
const Timer = () => {
const seconds = useTimer();
return <div>Seconds elapsed: {seconds}</div>;
};
Висновок
Розуміння стану та життєвого циклу в React є важливим для створення динамічних, інтерактивних додатків. Незалежно від того, чи віддаєте ви перевагу традиційному підходу з класами або сучасному підходу з hooks, ефективне управління станом та правильне оброблення подій життєвого циклу значно покращить ваш процес розробки.
Застосовуючи найкращі практики та використовуючи такі інструменти, як hooks, ви можете створювати масштабовані та підтримувані додатки на React.
У наступній частині цієї серії ми розглянемо управління станом поза компонентами, заглибившись у контекст, Redux та інші передові техніки для управління глобальним станом у додатках React.
Перекладено з: Part 3: Understanding State and Lifecycle in React