Реагировать на изменения жизненного цикла

React.js

Начиная с версии 16.3, React вносит постепенные изменения в жизненный цикл. Устарели некоторые методы жизненного цикла и добавлены некоторые новые методы жизненного цикла.

оригинальный жизненный цикл

Оригинальная схема жизненного цикла

новый жизненный цикл

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

Устаревшие методы жизненного цикла React

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

Хотя эти методы жизненного цикла были заброшены, реакция не удалила эти три метода, чтобы соответствовать совместимости версии, и также добавилUNSAFE_componentWillMount,UNSAFE_componentWillReceivePropsа такжеUNSAFE_componentWillUpdateметод, в версии v16.3 можно использовать как старые, так и новые методы. После версии 16.3v16.xВ версии старый и новый методы еще можно использовать, но использовать безUNSAFE_Префиксные методы вызовут устаревшее предупреждение. существуетv17удалитcomponentWillMount,componentWillReceivePropsа такжеcomponentWillUpdate, только сUNSAFE_Префикс новых методов жизненного цикла, которые можно использовать.

Недавно добавленные методы жизненного цикла React

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

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

устанавливать

Когда компонент создается и вставляется в DOM, он вызывается в порядке следующих методов жизненного цикла.

  • constructor()
  • static getDerivedStateFromProps()
  • componentWillMount()/UNSAFE_componentWillMount()будет устаревшим
  • render()
  • componentDidMount()

в определенииstatic getDerivedStateFromProps()ВремяcomponentWillMount()/UNSAFE_componentWillMount()будет недействительным.

constructor()

constructor(props)

Перед тем, как компонент React будет смонтирован, будет вызван его конструктор, который должен быть выполнен один раз внутри конструктора.super(props). больше не могуconstructorВнутренний вызовthis.setState. Обычно используется:

  • Датьthis.stateИнициализировать внутреннее состояние
  • Привяжите это к обработчику событий

static getDerivedStateFromProps()

static getDerivedStateFromProps(newProps,prevState)

Является静态方法, переданный родительским компонентомnewPropsи текущий компонентprevStateДля сравнения, нужно обновить при судействеstate, объект возвращаемого значения используется для обновленияstate, вернуть, если не нуженnull.

существуетrender()метод вызывается до и вызывается при первоначальном монтировании и последующих обновлениях.

import * as React from "react";
class App extends React.Component{
	constructor(props){
		super(props);
		this.state={
			childDown:1,
			num:0
		}
	}
	static getDerivedStateFromProps(props,state){
	    if(props.isDown === state.childDown){
	        return {
	            num:state.childDown
	        }
	    }
	    return null 
	}
	render(){
        return(
            <div>22</div>
        )
    }
}

componentWillMount()/UNSAFE_componentWillMount()устарел Вызывается перед монтированием. существуетrender()звонил раньше. вызов в этом методеsetStateне сработаетrender.

Некоторые люди привыкли размещать запрос на этом этапе, но рекомендуется размещать его именно на этом этапе.componentMidMount()середина. При серверном рендеринге синхронизируйте данные в этом методе, но рекомендуется использоватьconstructorдля инициализации данных.

render()

render()единственный метод, который должен быть реализован в компоненте.

react() используется для рендеринга и может возвращать следующие типы

  • Реагировать на элементы
  • массив или фрагменты
  • Portals
  • Строковый или числовой тип
  • логическое значение или ноль

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

componentDidMount()

Компонент загружен, и на этом этапе можно получить настоящий DOM.ajax请求а также绑定事件На этом этапе это должно быть вовремяcomponentWillUnmount()Отмена. На этом этапе вы можете позвонитьsetState,вызыватьrender

возобновить

  • componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()устарел
  • static getDerivedStateFromProps()
  • shouldComponentUpate()
  • componentWillUpdate()/UNSAFE_componentWillUpdate()устарел
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate

имеютgetDerivedStateFromPropsилиgetSnapshotBeforeUpdateчас,componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()а такжеcomponentWillUpdate()/UNSAFE_componentWillUpdate()неверный.

componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()устарел

UNSAFE_componentWillReceiveProps(nextprops){}

Получите новые компоненты, установленные вpropsВызванный ранее, обычно используйте этот метод для оценкиpropsобновить до и после измененийstate.

Следует отметить, что если родительский компонент вызывает повторный рендеринг компонента, то даже еслиpropsБез изменений также называется вторичный метод.

Этот метод будет устаревшим, рекомендуется использоватьgetDeviedStateFromProps.

import * as React from "react";
class App extends React.Component {
  state = {
    isWill: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.cur !== nextProps.cur) {
      this.setState({
        isWill:
          nextProps.cur > this.props.cur,
      });
    }
  }
  render(){
     return(
         <div>22</div>
     )
  }
}

static getDerivedStateFromProps()

Последовательный и крепление сцены.

shouldComponentUpdate()

shouldComponentUpdate(props,state)

В смонтированном компоненте, когдаpropsилиstateКогда происходит изменение, оно вызывается перед рендерингом.

Сравните свойства родительского компонента с текущим состоянием и вернитеtrue/false. Решите, следует ли запускать последующиеUNSAFE_componentWillUpdate(),render()а такжеcomponentDidUpdate().

Реагировать можетshouldComponentUpdate()считаются слабыми директивами, даже еслиstateдляfalseТакже можно привести к рендерингу компонентов.

import * as React from "react";
class App extends React.Component {
  state = {
    isWill: false,
  };

  shouldComponentUpdate(props,state){ 
       if(props.val !== state.val){
           console.log("shouldComponentUpdate");
           return true
       }
   }
   render(){
        return(
            <div>22</div>
        )
    }
}

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps,prevSteate)

Вызывается перед фактическим обновлением DOM. Может получить некоторую полезную информацию и передать ее в качестве параметра вcomponentDidUpdate().prevPropsUndedprops,prevStateзначит до обновленияstate.

существуетrender()ПозжеcomponentDidUpdate()звонил раньше. Возвращаемое значение (моментальный снимок) этого метода можно использовать какcomponentDidUpdate()Используется третий параметр. Возврат напрямую, если возвращаемое значение не требуетсяnull.

getSnapshotBeforeUpdate()нужно иcomponentDidUpdate()соответствовать.

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

Этот метод вызывается сразу после завершения обновления. Этот метод не выполняется при первом рендеринге.

Когда компонент обновляется, здесь можно управлять DOM.

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

удалить

  • componentWillUnmount()
componentWillUnmount()

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

не может быть вызван на данном этапеsetState, потому что компонент никогда не перерисовывается.

Суммировать

Жизненный цикл React можно посмотретькарта жизненного цикла.

Хотя React - это обратно совместимо, рекомендуется постепенно использовать новые методы жизненного цикла.

Для получения более подробной информации перейдите наЖизненный цикл реакции

Категории