React.js. Начало работы. Часть 4 из 12

16.10.2019

Теги: DOM • JavaScript • React.js • Web-разработка • Компонент • Событие • Фреймворк • Цикл

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

Методы жизненного цикла — это специальные методы, которые автоматически вызываются компонентами. Они сообщают о важных вехах в жизни компонента, и их можно использовать, чтобы повлиять на то, что должен сделать компонент. Можно сказать, что это такие обработчики событий, которые вызываются на разных этапах жизни компонента.

  • componentWillMount
  • componentDidMount
  • componentWillUnmount
  • componentWillUpdate
  • componentDidUpdate
  • shouldComponentUpdate
  • componentWillRecieveProps
  • componentDidCatch
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/babel">
    class DisplayNumber extends React.Component {
        render() {
            var style = {
                fontSize: "30px",
                fontFamily: "sans-serif",
                color: "#FFFFFF",
                fontWeight: "bold",
                marginBottom: "20px"
            };
            return (
                <div style={style}>
                    {this.props.number}
                </div>
            );
        }
    }

    class CounterWrapper extends React.Component {
        constructor(props) {
            super(props);

            // задаем значения по умолчанию для состояния компонента
            console.log("Момент для состояния по умолчанию!");

            this.state = {
                counter: 0
            }

            this.increase = this.increase.bind(this);
        }

        increase(e) {
            this.setState({
                counter: this.state.counter + 1
            });
        }

        componentWillUpdate(newProps, newState) {
            console.log("componentWillUpdate: Компонент будет обновлен!");
        }

        componentDidUpdate(currentProps, currentState) {
            console.log("componentDidUpdate: Компонент был обновлен!");
        }

        componentWillMount() {
            console.log("componentWillMount: Компонент будет добавлен в DOM!");
        }

        componentDidMount() {
            console.log("componentDidMount: Компонент был добавлен в DOM!");
        }

        componentWillUnmount() {
            console.log("componentWillUnmount: Компонент будет удален из DOM!");
        }

        shouldComponentUpdate(newProps, newState) {
            console.log("shouldComponentUpdate: Компонент должен быть обновлен?");
            if (newState.counter < 5) {
                console.log("shouldComponentUpdate: Да, компонент должен быть обновлен!");
                return true;
            } else {
                console.log("shouldComponentUpdate: Нет, компонент пропускает обновление!");
                return false;
            }
        }

        componentWillReceiveProps(newProps) {
            console.log("componentWillReceiveProps: Компонент сейчас получит новые свойства!");
        }

        render() {
            var style = {
                width: "300px",
                textAlign: "center",
                backgroundColor: "#777777",
                padding: "20px",
                fontFamily: "sans-serif",
                color: "#FFFFFF",
                borderRadius: "10px"
            }
            return (
                <div style={style}>
                    <p>{this.props.title}</p>
                    <DisplayNumber number={this.state.counter} />
                    <button onClick={this.increase}>Увеличить</button>
                </div>
            );
        }
    }

    // задаем значения по умолчанию для свойств компонента
    console.log("defaultProps: Момент для свойств по умолчанию!");
    CounterWrapper.defaultProps = {
        title: 'Количество нажатий на кнопку'
    };

    ReactDOM.render(
        <CounterWrapper/>,
        document.querySelector('#container')
    );
    </script>
<body>
</html>

1. Этап начала жизни

Когда компонент начинает свою жизнь и отправляется в DOM, вызываются методы жизненного цикла:

  1. Свойства по умолчанию
  2. Состояние по умолчанию
  3. Метод componentWillMount()
  4. Метод render()
  5. Метод componentDidMount()

Получение свойств по умолчанию

Свойство defaultProps позволяет указать дефолтное значение this.props. 

// задаем значения по умолчанию для свойств компонента
console.log("defaultProps: Момент для свойств по умолчанию!");
CounterWrapper.defaultProps = {
    title: 'Количество нажатий на кнопку'
};

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

Получение cостояния по умолчанию

Этот шаг выполняется внутри конструктора компонента, можно указать дефолтное значение this.state: 

constructor(props) {
    super(props);

    // задаем значения по умолчанию для состояния компонента
    console.log("Момент для состояния по умолчанию!");

    this.state = {
        counter: 0
    }

    this.increase = this.increase.bind(this);
}

Метод componentWillMount()

Это последний метод, который вызывается до того, как компонент будет передан в DOM. Здесь важно отметить: при вызове метода setState() внутри метода componentWillMount, компонент не будет повторно рендерится.

Метод render()

Каждый компонент должен иметь этот метод, т.к. он отвечает за возврат JSX-кода. Если ничего не нужно визуализировать, можно вернуть null или false.

Метод componentDidMount()

Этот метод вызывается сразу после того, как компонент визуализирован и помещен в DOM. На этом этапе можно безопасно выполнять любые манипулации с DOM, не беспокоясь о готовности компонента.

2. Изменение состояния

Если состояние компонента изменилось после того, как он был визуализирован и добавлен в DOM, будут вызваны следующие методы:

  1. Метод shouldComponentUpdate()
  2. Метод componentWillMount()
  3. Метод render()
  4. Метод componentDidMount()

Метод shouldComponentUpdate()

Иногда не нужно, чтобы компонент обновлялся при изменении состояния. Если метод shouldComponentUpdate() возвращает true, компонент будет обновлен. Если метод возвращает false, компонент пропускает обновление. 

shouldComponentUpdate(newProps, newState) {
    console.log("shouldComponentUpdate: Компонент должен быть обновлен?");
    if (newState.counter < 5) {
        console.log("shouldComponentUpdate: Да, компонент должен быть обновлен!");
        return true;
    } else {
        console.log("shouldComponentUpdate: Нет, компонент пропускает обновление!");
        return false;
    }
}

Метод componentWillUpdate()

Этот метод вызывается непосредственно перед обновлением компонента. Следует отметить, что нельзя изменить состояние, вызвав метод this.setState() из этого метода.

Метод render()

Если не было настроено поведение при обновлении с помощью метода shouldComponentUpdate(), код метода render() будет вызван снова.

Метод componentDidUpdate()

Этот метод вызывается после обновления компонента и после вызова метода render(). Если нудно выполнить какой-нибудь кода после обновления компонента, сейчас самое время.

3. Изменение свойств

Если свойства компонента изменились после того, как он был визуализирован и добавлен в DOM, будут вызваны следующие методы:

  1. Метод componentWillReceiveProps()
  2. Метод shouldComponentUpdate()
  3. Метод componentWillMount()
  4. Метод render()
  5. Метод componentDidMount()

Единственный новый метод — componentWillReceiveProps(). Этот метод получает один аргумент, который содержит новое значение свойства для присваивания.

4. Этап размонтирования

Последний этап, на который нужно обратить внимание — это когда компонент уничтожается и удаляется из DOM. Здесь активен только один метод жизненного цикла — componentWillUnmount(). На этом этапе выполняются задачи, связанные с очисткой: удаление слушателей событий и остановка таймеров.

Поиск: DOM • JavaScript • React.js • Web-разработка • Компонент • Событие • Фреймворк • Цикл

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.