lifecycle

lifecycle.js

import React, { Component } from 'react';

class Child extends Component {
    /**
     * Вызывается один раз прямо перед тем, как состоится первый render компонента. 
     * Вызов setState в рамках данного метода дополнительного рендера не вызовет.
     */
    componentWillMount() {
        console.log('componentWillMount', this.props, this.state);
    }
    /**
     * Вызывается один раз, после первого render().
     */
    componentDidMount() {
        console.log('componentDidMount', this.props, this.state);
    }

    /**
     * Вызывается каждый раз, когда компонент получает новые параметры. 
     * Не вызывается для первого рендера. Вызов setState в рамках данного метода дополнительного рендера не вызовет.
     * @param {*} nextProps 
     */
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', this.props, this.state);
    }
    /**
     * Вызывается при изменении параметров или состояния. 
     * Возвращает true (если изменение должно вызвать перерисовку компонента) 
     * или false (если изменение не влияет на отображение компонента).
     * @param {*} nextProps 
     * @param {*} nextState 
     */
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate', this.props, this.state);
        return nextProps.title !== this.props.title;
    }
    /**
     * Вызывается перед вызовом метода render() при изменении параметров или состояния компонента.
     * Нельзя илспользовать setState()
     * @param {*} nextProps 
     * @param {*} nextState 
     */
    componentWillUpdate(nextProps, nextState) {
        // в nextProps содержится объект с новыми параметрами
        // в nextState содержится объект с измененным состоянием
        console.log('componentWillUpdate', this.props, this.state);
    }
    /**
     * Вызывается сразу после вызова метода render() при изменении параметров или состояния компонента.
     * Нельзя илспользовать setState()
     * @param {*} prevProps 
     * @param {*} prevState 
     */
    componentDidUpdate(prevProps, prevState) {
        // в prevProps содержится объект с предыдущими параметрами
        // в prevState содержится объект с состоянием до изменения
        // измененные параметры и состояние могут быть получены через this.props и this.state
        console.log('componentDidUpdate', this.props, this.state);
    }

    /**
     * Вызывается перед тем, как компонент будет удален из DOM.
     */
    componentWillUnmount(){
        // обычно, в данном методе происходит некая уборка за компонентом
        // остановка таймеров, удаление ссылок на DOM елементы и т.д.
        console.log('componentWillUnmount', this.props, this.state);
    }
    render() {
        return (
            <div>
                <h2>{this.props.title}</h2>
                <button onClick={this.props.changeTitle}>Change title (props)</button>
            </div>
        );
    }
}

export default Child;