Жизненный цикл React

Каждое веб-приложение React состоит из компонентов, и эти компоненты проходят через некоторые жизненные циклы.

К ним относятся:

  • Инициализация: Первый этап жизненного цикла компонентов React. На этом этапе инциализируются состояния и свойства по умолчанию.
  • Монтирование: Монтирование — это когда экземпляр компонента создается и вставляется в DOM.
  • Обновление: Обновление — это этап, когда состояние компонента обновляется и компонент перерисовывается.
  • Размонтирование: Как следует из названия, размонтирование — это заключительный этап жизненного цикла компонента, когда компонент удаляется со страницы.

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

constructor() {
        super()
        this.state = {
            show: false
        }
        console.log("Constructor ran, State has been intialized");
    }
Вход в полноэкранный режим Выход из полноэкранного режима

Монтирование

В React есть четыре встроенных метода, которые вызываются в таком порядке при монтировании компонента:

  • constructor()
  • getDerivedStateFromProps()
  • рендеринг()
  • componentDidMount()

Render
Метод render() является единственным обязательным методом в компоненте класса.

    render() {
        console.log("render ran");
        return (
            <div>
                <h1>Show and Hide Counter</h1>
                <p>{this.state.text}</p>
                <button onClick={this.click}>{this.state.show ? "Hide counter" : "Show Counter"}</button>
                {this.state.show && <Counter/>}
            </div>
        )
    }
Вход в полноэкранный режим Выйти из полноэкранного режима

Функция render() должна быть чистой, то есть она не изменяет состояние компонента, возвращает один и тот же результат при каждом вызове и не взаимодействует напрямую с браузером.

Функция componentDidMount()
Она запускается сразу после вставки компонента в дерево (монтирования). Именно здесь мы запускаем операторы, которые требуют, чтобы компонент уже был размещен в DOM.

    componentDidMount() {
        setTimeout(() => {
          this.setState({text: "Text was mounted first and then it was changed after 5 sec"})
        }, 5000)
        console.log("component was mounted");
      }
Вход в полноэкранный режим Выход из полноэкранного режима

Через 5 секунд

Монтирование компонента счетчика:
При нажатии на кнопку show counter снова запускается рендеринг, так как мы изменили состояние.

    click = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        }
        else{
            this.setState({
                show:false
            })
        }
    }
Вход в полноэкранный режим Выход из полноэкранного режима

После этого наш компонент счетчика рендерится и монтируется.

Обновление

Компонент обновляется всякий раз, когда происходит изменение состояния компонента или его реквизитов.

  • componentDidUpdateМетод componentDidUpdate вызывается после обновления компонента в DOM.

Здесь при увеличении компонента происходит его рендеринг и обновление.

  • shouldComponentUpdateВ методе shouldComponentUpdate() вы можете вернуть булево значение, которое определяет, должен ли React продолжать рендеринг или нет.

Значение по умолчанию — true.

Несмотря на то, что мы нажимаем на кнопку увеличения и уменьшения, компонент не обновляется, потому что наш метод shouldComponentUpdate() возвращает значение flase.


App.js

import React, { Component } from 'react'
import Counter from './counter'


export class App extends Component {
    constructor() {
        super()
        this.state = {
            show: false,
            text:"See how the text will change"
        }
        console.log("Constructor ran, State has been intialized");
    }

    // componentDidMount() {
    //     setTimeout(() => {
    //       this.setState({text: "Text was mounted first and then it was changed after 5 sec"})
    //     }, 5000)
    //     console.log("component was mounted");
    //   }
    click = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        }
        else{
            this.setState({
                show:false
            })
        }
    }




    render() {
        console.log("render ran");
        return (
            <div>
                <h1>Show and Hide Counter</h1>
                <p>{this.state.text}</p>
                <button onClick={this.click}>{this.state.show ? "Hide counter" : "Show Counter"}</button>
                {this.state.show && <Counter/>}
            </div>
        )
    }
}

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

counter.js

import React, { Component } from 'react';

class Counter extends Component {
    constructor(){
        super()
        this.state={
            counter:0
        }

    }
    componentDidMount(){

        console.log("mounted the counter");
    }
    increment=()=>{
        this.setState(prevVal=>({
            counter:prevVal.counter-1
        }))
        console.log("button was clicked");
    }

    decrement=()=>{
        this.setState(prevVal=>({
            counter:prevVal.counter+1
        }))
        console.log("button was clicked");
    }

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

    componentDidUpdate(){
        console.log("component was updated");
    }

    render() {
        console.log("render ran for counter");
        return (
            <div>
                <button onClick={this.decrement}>+</button>
                <h6>{this.state.counter}</h6>
                <button onClick={this.increment}>-</button>
            </div>
        );
    }
}

export default Counter;

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

Ссылки

  • https://reactjs.org/docs/reactcomponent.html#componentdidmount
  • https://www.w3schools.com/react/react_lifecycle.asp
  • https://www.cuelogic.com/blog/reactjs-lifecycle

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