Управление ресурсами
В приложениях React при удалении компонентов важно освобождать ресурсы, которые используются этими компонентами. Для управления ресурсами можно задействовать функции жизненного цикла компонента.
Создание подобных ресурсов в компонентах React производится в функции componentDidMount(). А для освобождения ресурсов применяется функция componentWillUnmount().
Стандартный пример - часы, которые выводят текущее время на страницу и для обновления времени используют таймер:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = ReactDOM.createRoot(
document.getElementById("app")
);
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date(), name: "Tom"};
this.unmount = this.unmount.bind(this);
}
unmount(){
root.unmount();
}
componentDidMount() {
this.timerId = setInterval(
()=> this.tick(),
1000
);
console.log("componentDidMount()");
}
componentWillUnmount() {
clearInterval(this.timerId);
console.log("componentWillUnmount()");
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Привет, {this.state.name}</h1>
<h2>Текущее время {this.state.date.toLocaleTimeString()}.</h2>
<button onClick={this.unmount}>Unmount</button>
</div>
);
}
}
root.render(
<Clock />
);
</script>
</body>
</html>
В функции componentDidMount() создается таймер - ресурс, используемый компонентом. Для его освобождения в функции
componentWillUnmount() вызывается функция clearInterval().
Для имитации удаления компонента с веб-страницы (и соответственно для вызова метода componentWillUnmount и удаления ресурсов) определена кнопка,
по нажатию на которую вызывается функция unmount(). В этой функции вызывается функция root.unmount(),
которая открепляет компонент от html-элемента на веб-странице.
В итоге работа компонента будет выглядеть следующим образом:
Когда элемент
<Clock />передается в функциюroot.render(), React вызывает конструктор компонента Clock. В конструкторе компонента устанавливается объект this.state, который содержит текущую дату и время.Затем React вызывает метод
render()компонента Clock, и происходит обновление DOM, в который добавляется элемент, созданный компонентом Clock.Когда элемент, сгенерированный компонентом Clock, добавляется в DOM, React вызывает метод
componentDidMount(). Это приводит к запуску методаtick()Каждую секунду браузер вызывает метод
tick(), в котором через вызовsetState()обновляется значениеthis.state.date. При обновленииthis.stateReact вызывает повторно методrender()и обновляет веб-страницу.Если нажимем на кнопку, компонент Clock удаляется из DOM, и React вызывает метод
componentWillUnmount(), в котором останавливается таймер.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи