Как реализовать жизненные циклы компонентов с помощью useEffect
Python
Middle
Без компании
Как реализовать жизненные циклы компонентов с помощью useEffect
Ответы
В React с хуками `useEffect` позволяет управлять жизненным циклом компонента. Основные сценарии:
- **Монтирование** (аналог `componentDidMount`):
```
useEffect(() => {
// Код выполнится при монтировании
console.log('Компонент смонтирован');
return () => {
// Код выполнится при размонтировании
console.log('Компонент будет размонтирован');
};
}, []); // Пустой массив зависимостей
```
- **Обновление** (аналог `componentDidUpdate`):
```
useEffect(() => {
// Код выполнится при каждом обновлении
console.log('Компонент обновился');
});
```
- **Зависимость от пропсов/стейта**:
```
useEffect(() => {
// Код выполнится при изменении переменной count
console.log(`Count изменился: ${count}`);
}, [count]); // Указание зависимостей
```
- **Очистка** (аналог `componentWillUnmount`):
```
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => {
clearInterval(timer); // Очистка при размонтировании
};
}, []);
```
Важно помнить, что `useEffect` выполняется после рендера компонента. Для синхронных операций до рендера используйте `useLayoutEffect`.