Методы жизненного цикла React

Каждый компонент в react живет своей жизнью — от рождения до смерти.
Основные три стадии жизненного цикла компонента:

У нас есть много методов в этом жизненном цикле, но я расскажу о четырех наиболее часто используемых методах. Эти методы могут использоваться только в классе компонентов.

render()

render() {
    console.log('rendering')
    return (
        <div>
          <div>Parent Component</div>
        </div>);

         }
Вход в полноэкранный режим Выйти из полноэкранного режима

Можно использовать и другие способы, но этот должен быть объявлен. На этом этапе создается наш компонент и добавляется в DOM. Рендеринг компонента в DOM

componentDidMount()

Компонент componentDidMount() вызывается после рендеринга компонента.


class... {
constructor(props) {
    super();

    this.state = {
        color : ''
    }
}

    componentDidMount() {
        this.setState({
            color: 'red'
        })
    }

    render() {
        <h1>I, a header element, is born! My color is {this.state.color}</h1>
    }

}

Вход в полноэкранный режим Выход из полноэкранного режима

componentdidupdate()

После завершения обновления вызывается этот метод. Он принимает в качестве входных данных предыдущий реквизит, предыдущее состояние. Это идеальное место для создания побочных эффектов и выполнения сетевых запросов на обновленные реквизиты.

 componentDidUpdate(prevProps) {
        if(this.props.color !== prevProps.color) {
            console.log('component updating')
        }
    }

Вход в полноэкранный режим Выход из полноэкранного режима

shouldComponentUpdate()

Когда состояние или реквизиты изменяются, вы захотите, чтобы компонент перерисовывался. Однако у вас есть контроль над этим поведением.
Вы можете контролировать, будет ли компонент перерендериваться, возвращая булево значение (true или false) в этом методе жизненного цикла.

shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    return true
}
Вход в полноэкранный режим Выход из полноэкранного режима

Ссылки

react js

журнал Rocket

Оцените статью
devanswers.ru
Добавить комментарий