ReactJS життєвий цикл компонента

1. constructor(props) - конструктор, у якому відбувається початкова ініціалізація компонента
2. componentWillMount() - викликається безпосередньо перед рендерингом компонента
3. render() - рендеринг компонента
4. componentDidMount() - викликається після рендерингу компонента. Тут можна виконувати запити до віддалених ресурсів
5. componentWillReceiveProps(nextProps) - викликається при оновленні об'єкта props
6. shouldComponentUpdate(nextProps, nextState) - викликається щоразу при оновленні об'єкта props або state
7. componentWillUpdate(nextProps, nextState) - викликається перед оновленням компонента
8. componentDidUpdate(prevProps, prevState) - викликається відразу після оновлення компонента
9. componentWillUnmount() - викликається перед видаленням компонента з DOM

Нові методи для ReactJs 16.3+

static getDerivedStateFromProps(nextProps, prevState) - замінює методи componentWillReceiveProps та componentWillUpdate

getSnapshotBeforeUpdate() - отримуємо DOM до оновлення

    // Створення
    componentWillMount() {
        console.log('App componentWillMount')
    }

    render() {
        console.log('App render')
    }

    // Можна починати звертатися до бекенду
    componentDidMount() {
        console.log('App componentDidMount')
    }

    //Оновлення
    componentWillReceiveProps(nextProps) {
        console.log('App componentWillReceiveProps', nextProps)
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('App shouldComponentUpdate', nextProps, nextState)
        //return nextProps.name.trim() !== this.props.name.trim()
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
        console.log('App componentWillUpdate', nextProps, nextState)
    }

    componentDidUpdate() {
        console.log('App componentDidUpdate')
    }

    //Вилучення
    componentWillUnmount(){
        console.log('App componentWillUnmount')
    }

   //Нові методи у ReactJs 16.3+
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('App getDerivedStateFromProps', nextProps, prevState)
        return prevState
    }

    getSnapshotBeforeUpdate(){
        console.log('Car getSnapshotBeforeUpdate')
    }