Иллюстрация жизненного цикла React в ES6

внешний интерфейс модульный тест React.js Redux

предисловие

Если жизненный цикл React уподобить муравью, ползающему по праще, то муравей ползет от конца веревки к концу веревки и по очереди активирует разные крючки для карт. В каждом жизненном цикле React также существует хук карты, который мы называем «функцией хука». Итак, какие функции ловушек есть в жизненном цикле React? Каков жизненный цикл React? Сегодня я подведу итог

Жизненный цикл реакции

Как показано на рисунке, жизненный цикл React в основном включает три этапа: этап инициализации, этап выполнения и этап уничтожения.В разных жизненных циклах React по очереди будут запускаться разные функции-ловушки.Давайте подробно рассмотрим функции жизненного цикла React. .

1. Этап инициализации

1. Установите свойства компонента по умолчанию
static defaultProps = {
    name: 'sls',
    age:23
};
//or
Counter.defaltProps={name:'sls'}
2. Установите состояние инициализации компонента
constructor() {
    super();
    this.state = {number: 0}
}
3. КомпонентВиллМаунт()

Срабатывает перед отрисовкой компонента на страницу, в это время можно запустить таймер, отправить запрос на сервер и т. д.

4. рендер()

Рендеринг компонентов

5. компонентDidMount()

Запускается после того, как компонент был отображен на странице: в это время на странице есть реальные элементы DOM, и операции, связанные с DOM, могут выполняться.

Второй этап операции

1. компонентWillReceiveProps()

Запускается, когда компонент получает свойство

2. долженОбновитьКомпонент()

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

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

Как правило, мы используем эту функцию для оптимизации производительности:

Когда проекту React необходимо обновить виджет, вполне вероятно, что родительскому компоненту необходимо обновить свое собственное состояние. Повторное обновление родительского компонента заставит все его подкомпоненты повторно выполнить метод render() для формирования нового виртуального DOM, а затем использовать алгоритм сравнения для сравнения структуры и свойств старого и нового виртуального DOM. для определения необходимости повторного рендеринга компонента.

Несомненно, такая операция приведет к большим потерям производительности, поэтому наши разработчики могутshouldComponentUpdate()Добавьте условное суждение для оптимизации производительности

Например, React предоставляетPureComponentКогда наш компонент наследуется от него, при обновлении компонента он будет сравнивать старые и новые свойства и состояния по умолчанию, чтобы определить, обновлен ли компонент. Примечательно,PureComponentСравнение неглубокое, поэтому при изменении состояния или свойства компонента необходимо вернуть новый объект или массив.

3. компонентWillUpdate()

Запускается, когда компонент собирается обновиться

4. КомпонентDidUpdate()

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

3. Этап разрушения

1. компонентWillUnmount()

Запускается при уничтожении компонента. Здесь мы можем выполнить некоторые операции по очистке, такие как очистка таймеров, отмена событий подписки Redux и так далее.

Заинтересованные студенты также могут использовать следующий код для проверки

Не говорите глупостей, пусть придет код!

import React from 'react'
import ReactDOM from 'react-dom';

class SubCounter extends React.Component {
    componentWillReceiveProps() {
        console.log('9、子组件将要接收到新属性');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('10、子组件是否需要更新');
        if (newProps.number < 5) return true;
        return false
    }

    componentWillUpdate() {
        console.log('11、子组件将要更新');
    }

    componentDidUpdate() {
        console.log('13、子组件更新完成');
    }

    componentWillUnmount() {
        console.log('14、子组件将卸载');
    }

    render() {
        console.log('12、子组件挂载中');
        return (
                <p>{this.props.number}</p>
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //1、加载默认属性
        name: 'sls',
        age:23
    };

    constructor() {
        super();
        //2、加载默认状态
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log('3、父组件挂载之前');
    }

    componentDidMount() {
        console.log('5、父组件挂载完成');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('6、父组件是否需要更新');
        if (newState.number<15) return true;
        return false
    }

    componentWillUpdate() {
        console.log('7、父组件将要更新');
    }

    componentDidUpdate() {
        console.log('8、父组件更新完成');
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log('4、render(父组件挂载)');
        return (
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
                {this.state.number<10?<SubCounter number={this.state.number}/>:null}
            </div>
        )
    }
}
ReactDOM.render(<Counter/>, document.getElementById('root'));
Категории