CodeBase | Frontend
2.14K subscribers
381 photos
150 videos
5 files
569 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
⚡️ componentWillUnmount ⚡️

➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место для выполнения задач по очистке, таких как остановка таймеров, отписка от событий или освобождение ресурсов для предотвращения утечек памяти.

🗣 Пример кода:

jsx
import React, { Component } from 'react';

class TimerComponent extends React.Component {
constructor() {
super();
this.state = {
seconds: 0,
};
this.timer = null; // Инициализация таймера
}
// При монтировании компонента, запускаем таймер
componentDidMount() {
this.timer = setInterval(() => {
this.setState({ seconds: this.state.seconds + 1 });
}, 1000); // Обновление каждую секунду (1000 миллисекунд)
}
// При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<>
<h1>Timer Component</h1>
<p>Прошедшее время: {this.state.seconds} секунд</p>
</>
);
}
}
export default TimerComponent;


TimerComponent класс инициализирует состояние seconds для отслеживания времени. В componentDidMount устанавливается таймер, а в componentWillUnmount он очищается. Таймер обновляет время каждую секунду. Компонент отображает прошедшее время. Очистка таймера в componentWillUnmount предотвращает утечки ресурсов.

Понравился пост? Добавь 🔥🔥🔥


CodeBase | Frontend | #react_js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3🥴1