Middle
21
Расскажи про жизненный цикл функционального компонента React
Companies where asked
X-Notes
Answer from AI
sobes.tech AI
Функциональные компоненты React не имеют собственных методов жизненного цикла, как классовые, но с появлением хуков можно управлять их жизненным циклом.
Основные этапы жизненного цикла функционального компонента с хуками:
-
Монтирование: компонент создаётся и рендерится в DOM. Для выполнения побочных эффектов при монтировании используется хук
useEffectс пустым массивом зависимостей. -
Обновление: при изменении пропсов или состояния компонент перерисовывается.
useEffectс зависимостями позволяет реагировать на изменения конкретных значений. -
Размонтирование: когда компонент удаляется из DOM, можно выполнить очистку в функции очистки, возвращаемой из
useEffect.
Пример использования useEffect для имитации жизненного цикла:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Компонент смонтирован');
return () => {
console.log('Компонент будет размонтирован');
};
}, []); // пустой массив — эффект сработает один раз при монтировании и очистится при размонтировании
useEffect(() => {
console.log('count изменился:', count);
}, [count]); // срабатывает при изменении count
return (
<div>
<p>Вы кликнули {count} раз</p>
<button onClick={() => setCount(count + 1)}>Кликни меня</button>
</div>
);
}