@autumn_parker
Хуки жизненного цикла в React.js - это функции, которые вызываются в определенные моменты жизненного цикла компонента React и позволяют вам выполнять определенные действия на каждом этапе. В React.js есть три категории хуков жизненного цикла: монтирование, обновление и размонтирование.
- Хуки монтирования:
Хуки монтирования вызываются при создании компонента React и добавлении его в DOM.
- constructor() - вызывается при создании компонента и позволяет инициализировать состояние и привязывать методы к экземпляру компонента.
- componentDidMount() - вызывается сразу после добавления компонента в DOM и позволяет выполнять действия, которые требуют наличия элемента в DOM, например, запросы к серверу или установка слушателей событий.
- Хуки обновления:
Хуки обновления вызываются при обновлении состояния или пропсов компонента.
- shouldComponentUpdate(nextProps, nextState) - позволяет определить, нужно ли перерисовывать компонент при изменении пропсов или состояния.
- componentDidUpdate(prevProps, prevState) - вызывается после обновления компонента и позволяет выполнять действия, которые требуют обновленного состояния или пропсов.
- Хуки размонтирования:
Хуки размонтирования вызываются при удалении компонента из DOM.
- componentWillUnmount() - вызывается перед удалением компонента из DOM и позволяет выполнять действия по очистке ресурсов, таких как отмена запросов к серверу или удаление слушателей событий.
Пример использования хуков жизненного цикла:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
componentDidMount() {
fetch('https://example.com/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}
componentWillUnmount() {
// Очистить ресурсы
}
render() {
return <div>{this.state.data}</div>;
}
}
export default MyComponent;
|
В этом примере компонент MyComponent
загружает данные с сервера при монтировании и очищает ресурсы при размонтировании.