Жизненный цикл компонентов React

Как мы все знаем, компоненты являются основными строительными блоками приложения react, поэтому очень важно понимать их жизненный цикл в процессе работы приложения react.

Фазы жизненного цикла компонентов React

Жизненный цикл компонентов делится на четыре фазы, которые вызываются на разных этапах работы компонента. Эти фазы перечислены ниже:-

  1. Инициализация
  2. Монтаж
  3. Обновление
  4. Размонтирование

Давайте подробнее рассмотрим каждую из этих фаз, начиная с Инициализации.

Инициализация

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

constructor(props) {
        // Calling parent class constructor
        super(props);

        // Setting initial state
        this.state = {
            clickCount: 0
        };
    }
Вход в полноэкранный режим Выход из полноэкранного режима

Монтаж

На этом этапе создается экземпляр компонента и вставляется в DOM. Он состоит из следующих методов:-

  • componentDidMount(): Этот метод вызывается сразу после рендеринга компонента в DOM. Этот метод вызывается сразу после первого выполнения функции render.

  • render(): Этот метод определяется в каждом компоненте. Он отвечает за возврат одного корневого элемента узла HTML. Если вы не хотите ничего возвращать, вы можете вернуть значение null или false.

Обновление

Это фаза, на которой состояние и свойства компонентов изменяются, если этого требуют некоторые события пользователя. Основная цель этой фазы — убедиться, что компонент отображает последнюю версию самого себя. Ниже перечислены методы, используемые в этой фазе:-

  • shouldComponentUpdate(): Вызывается, когда компонент принимает решение о каких-либо изменениях/обновлениях в DOM. Он позволяет контролировать поведение компонента при обновлении. Если этот метод возвращает true, компонент обновится. В противном случае компонент пропустит обновление.

  • componentDidUpdate(): Этот метод вызывается после повторного рендеринга компонента, то есть этот метод вызывается один раз после выполнения функции рендеринга после обновления. Этот метод не вызывается при первоначальном рендеринге.

Размонтирование

Это заключительная фаза жизненного цикла компонента react. Она вызывается, когда экземпляр компонента уничтожается и отмонтируется от DOM. Эта фаза содержит только один метод, который приведен ниже.

  • componentWillUnmount(): Этот метод вызывается, когда компонент полностью удаляется со страницы, что свидетельствует о завершении его жизненного цикла.

Пример

Ниже приведен пример кода для понимания жизненного цикла компонента react:

export default class App extends Component {
    constructor(props) {
        // Calling parent class constructor
        super(props);

        // Settings initial state
        this.state = {
            clickCount: 0
        };

        console.log('Constructor called'); 
    }

    componentDidUpdate(){
        console.log("componentDidUpdate called"); 
    }

    componentDidMount(){
        console.log("componentDidMount called"); 
    }

    shouldComponentUpdate(){
        console.log("shouldComponentUpdate called"); 
        return false; 
    }

    handleClick = () => {
        let {clickCount} = this.state; 

        this.setState({clickCount: clickCount + 1}); 
    }

    render() {
        console.log("render called"); 

        return (
            <>
                <Header brandName="Xorg"/> 
                <Button handleClick={this.handleClick} displayCount={this.state.clickCount}/> 
            </>
        );
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Это порядок, в котором функции вызываются изначально.

Это порядок, в котором функции вызываются после обновления состояния компонента.

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