Жизненный цикл компонента
В процессе работы компонент проходит через ряд этапов жизненного цикла. На каждом из этапов вызывается определенная функция, в которой мы можем определить какие-либо действия:
constructor(props): конструктор, в котором происходит начальная инициализация компонента
static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента. Этот метод не имеет доступа к текущему объекту компонента (то есть обратиться к объкту компоненту через this) и должен возвращать объект для обновления объекта state или значение
null, если нечего обновлять.render(): рендеринг компонента
componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам
componentWillUnmount(): вызывается перед удалением компонента из DOM
Кроме этих основных этапов или событий жизненного цикла, также имеется еще ряд функций, которые вызываются при обновлении состояния после начального рендеринга компонента, если в компоненте происходят обновления:
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при обновлении объекта props или state. В качестве параметра передаются новый объект props и state. Эта функция должна возвращать true (надо делать обновление) или false (игнорировать обновление). По умолчанию возвращается true. Но если функция будет возвращать false, то тем самым мы отключим обновление компонента, а последующие функции не будут срабатывать.
render(): рендеринг компонента (если shouldComponentUpdate возвращает true)
getSnapshotBeforeUpdate(prevProps, prevState): вызывается непосредственно перед обновлением компонента. Он позволяет компоненту получить информацию из DOM перед возможным обновлением. Возвращает в качестве значения какой-то отдельный аспект, который передается в качестве третьего параметра в метод
componentDidUpdate()и может учитываться в componentDidUpdate при обновлении. Если нечего возвращать, то возвращается значениеnullcomponentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state. Третий параметр - значение, которое возвращает метод
getSnapshotBeforeUpdate
Применим некоторые из событий жизненного цикла:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
button{
width: 100px;
height:30px;
border-radius: 4px;
margin:50px;
}
.on{
color:#666;
background-color: #ccc;
}
.off{
color:#888;
background-color: white;
}
</style>
</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">
class ClickButton extends React.Component {
constructor(props) {
super(props);
this.state = {class: "off", label: "Нажми"};
this.press = this.press.bind(this);
console.log("constructor");
}
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps()");
return null;
}
componentDidMount(){
console.log("componentDidMount()");
}
componentWillUnmount(){
console.log("componentWillUnmount()");
}
shouldComponentUpdate(){
console.log("shouldComponentUpdate()");
return true;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate()");
return null;
}
componentDidUpdate(){
console.log("componentDidUpdate()");
}
press(){
var className = (this.state.class==="off")?"on":"off";
this.setState({class: className});
}
render() {
console.log("render()");
return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;
}
}
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<ClickButton />
);
</script>
</body>
</html>
При загрузке компонента сработают сразу четыре этапа жизненного цикла компонента:
При нажатии на кнопку сработает обработчик нажатия, который обновит объект state, что вызовет еще ряд функций жизненного цикла и повторный рендеринг:
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи