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

внешний интерфейс React.js

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

конструктор() конструктор

Конструктор — это метод по умолчанию для классов в ES6.Этот метод вызывается автоматически, когда экземпляр объекта создается с помощью новой команды. Более того, этот метод обязателен в классе, если нет явного определения, то по умолчанию будет добавлен пустой метод конструктора(). При наличии конструктора ⚠️ необходимо вручную вызывать метод super. Если вы хотите использовать в конструктореthisключевое слово, вы должны сначала вызватьsuperметодMDN-super. В конструкторе, если вы хотите получить доступ к this.props, вам нужно передать реквизиты в super. Но независимо от того, определен конструктор или нет, передается ли super в параметре props, this.props можно использовать в других жизненных циклах реакции, которая автоматически прикрепляется React.

class MyClass extends React.component{
    constructor(props){
        super(props); // 声明constructor时必须调用super方法
        console.log(this.props); // 可以正常访问this.props
    }
}

конструктор Метод конструктора часто используется для инициализации состояния

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this.props.List
        };
        this.state.list = []; //修改state
        setTimeout(() => {
          this.setState({list: [1, 2, 3]}); //异步操作后 setState 触发渲染
        }, 100);
    }
}

Следует отметить, что состояние определяется в конструкторе.Если вы хотите изменить состояние после некоторых операций, вам нужно только действовать напрямуюthis.stateТо есть, если вы выполняете асинхронную операцию в конструкторе, вам нужно вызватьsetStateчтобы вызвать повторный рендеринг. В остальном вы можете использовать только тогда, когда вам нужно изменить состояниеthis.setState, так что React вызовет обновление рендеринга пользовательского интерфейса.

Свойства экземпляра статического метода класса Инициализировать состояние

class ReactCounter extends React.Component {
	state = {
	  list: []
	};
}

Конкретные статьи можно найтиСтатические методы класса

componentWillMount() перед монтированием компонента

Вызывается перед монтированием компонента и только один раз глобально. Если вы можете установить состояние в этом хуке, вы сможете увидеть обновленное состояние после рендеринга, не запуская повторный рендеринг. Этот жизненный цикл может инициировать асинхронные запросы и setState. (После React v16.3 от этого жизненного цикла отказались, и состояние можно задать в конструкторе)

render() визуализирует компонент

Рендеринг — это жизненный цикл, который должны определить компоненты React для рендеринга dom. ⚠️Не изменяйте состояние в рендере, это вызовет бесконечный цикл и вызовет переполнение стека. рендер должен возвращать reactDom

render() {
	const {nodeResultData: {res} = {}} = this.props;
	if (isEmpty(res)) return noDataInfo;
	const nodeResult = this.getNodeResult(res);
	return (
		<div className="workspace-dialog-result">
			{nodeResult}
		</div>
	);

componentDidMount() После монтирования компонента

Вызывается после монтирования компонента и только один раз глобально. Вы можете использовать refs здесь, чтобы получить настоящий элемент dom. В этом хуке также может быть инициирован асинхронный запрос, а setState может быть выполнен в асинхронном запросе.

componentDidMount() {
	axios.get('/auth/getTemplate').then(res => {
		const {TemplateList = []} = res;
		this.setState({TemplateList});
	});
}

componentWillReceiveProps (nextProps) перед изменением свойств

Этот жизненный цикл запускается при изменении реквизита и повторном рендеринге родительского компонента.В этом хуке вы можете получить измененные параметры реквизита через параметр nextProps и получить доступ к предыдущим реквизитам через this.props. setState может выполняться в течение этого жизненного цикла.(После React v16.3 от этого жизненного цикла отказались, и можно использовать новый цикл.static getDerivedStateFromPropsзаменять)

shouldComponentUpdate(nextProps, nextState) следует ли повторно отображать

После того, как компонент смонтирован, shouldComponentUpdate вызывается каждый раз, когда вызывается setState, чтобы определить, нужно ли повторно отображать компонент. Возвращает true по умолчанию и требует повторного рендеринга. Верните false, чтобы не запускать рендеринг. В более сложных приложениях некоторые изменения данных не влияют на отображение интерфейса.Здесь можно сделать выводы для оптимизации эффективности рендеринга.

componentWillUpdate(nextProps, nextState)

После того, как shouldComponentUpdate возвращает значение true или вызывается forceUpdate, будет вызываться componentWillUpdate. Вы не можете установить состояние в этом хуке, это вызовет цикл повторения.(После React v16.3 от этого жизненного цикла отказались, и можно использовать новый цикл.getSnapshotBeforeUpdate)

componentDidUpdate() завершает рендеринг компонента

За исключением вызова componentDidMount после первого рендеринга, componentDidUpdate вызывается после других рендеров. SetState в этом хуке может вызвать повторный рендеринг, вам нужно судить самостоятельно, иначе он войдет в бесконечный цикл.

componentDidUpdate() {
    if(condition) {
        this.setState({..}) // 设置state
    } else {
        // 不再设置state
    }
}

componentWillUnmount() Компонент будет размонтирован.

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

схема жизненного цикла

Полный пример жизненного цикла

class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {str: "hello"};
    }

    componentWillMount() {
        alert("componentWillMount");
    }

    componentDidMount() {
        alert("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }

    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;        // 记得要返回true
    }

    componentWillUpdate() {
        alert("componentWillUpdate");
    }

    componentDidUpdate() {
        alert("componentDidUpdate");
    }

    componentWillUnmount() {
        alert("componentWillUnmount");
    }
	render() {
        alert("render");
        return(
            <div>
                <span><h2>{parseInt(this.props.num)}</h2></span>
                <br />
                <span><h2>{this.state.str}</h2></span>
            </div>
        );
    }
}

Новый жизненный цикл React v16.3 (воспроизведено)

React v16.3 удаляет следующие три жизненных цикла

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

Добавлено два жизненных цикла

  • static getDerivedStateFromProps
  • getSnapshotBeforeUpdate

static getDerivedStateFromProps

  • Время срабатывания: после сборки компонента (после виртуального дома, до монтирования фактического дома) и после каждого извлечения новых реквизитов.
  • Каждый раз, когда будут получены новые реквизиты, объект будет возвращен как новое состояние.Возврат нулевого значения означает, что состояние не нужно обновлять.
  • С помощью componentDidUpdate вы можете переопределить все случаи использования componentWillReceiveProps.
class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 没错，这是一个static
  }
}

getSnapshotBeforeUpdate

  • Время срабатывания: когда происходит обновление, после рендеринга, до рендеринга dom компонента.
  • Возвращает значение в качестве третьего параметра componentDidUpdate.
  • С помощью componentDidUpdate все случаи использования componentWillUpdate могут быть переопределены.
class Example extends React.Component {
	getSnapshotBeforeUpdate(prevProps, prevState) {
	// ...
	}
}
Категории