Как использовать методы жизненного цикла React

внешний интерфейс React.js
Как использовать методы жизненного цикла React

оригинал:How to use React Lifecycle Methods

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

Обычно делится на три категории

  • Mount
  • Update
  • Unmount

Mount

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

Update

  • componentWillReceiveProps() / static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • componentWillUpdate() / getSnapshotBeforeUpdate()
  • render()
  • componentDidUpdate()

Unmount

  • componentWillUnmount()

Жизненный подход

componentWillMount (скоро)

componentWillMount()

Когда React визуализирует компонент, вы сначала вводите этот метод.

Примечание:componentWillMount()является единственным вrender()Метод жизненного цикла, который был вызван ранее. Поэтому это единственный метод, вызываемый при рендеринге на стороне сервера.

потому чтоcomponentWillMount()Будет удален, рекомендуется использовать официальныйconstructor()Альтернатива этого метода

**Обновление.** Этот метод следует избегать в новом коде.

State

можно использовать в этом методеthis.setState()Но не обязательно вызывать повторный рендеринг.

componentDidMount

componentDidMount()

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

State

можно использовать в этом методеthis.setState()метод, который вызовет повторный рендеринг.

Use Cases

  • fetch data
  • Зависит от инициализации DOM
  • Добавить прослушиватель событий

componentWillReceiveProps (скоро)

componentWillReceiveProps(nextProps)

Когда компонент получает новыйprops, метод будет вызываться первым, но следует отметить, чтохотяpropsне изменилось, метод также будет вызываться, поэтому при использовании этого метода обязательно сравнитеthis.propsа такжеnextProps, чтобы избежать ненужного рендеринга.

Обновлять:componentWillReceivePropsбудет удален, используйте новыйstatic getDerivedStateFromPropsзаменять.

Статические getderedstatefromprops (новый)

static getDerivedStateFromProps(props, state)

каждый разrenderвызовет этот метод, даже еслиpropsНичего не изменилось.Так что используйте его экономно.

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)

Иногда вам нужно избежать лишнего рендеринга, вы можете использовать этот метод. вернутьfalseозначает, что React не выполняетсяcomponentWillUpdate(),render(),componentDidUpdate().

Этот метод не выполняется во время инициализации.

**Примечание.** Согласно документации React, React можетshouldComponentUpdateЭто рассматривается как приглашение, а не строго в соответствии с его возвращаемым результатом, чтобы решить, выполнять или нет, то есть может показаться, чтоshouldComponentUpdateвернутьfalse, но повторный рендеринг все равно происходит.

State

нельзя установить в этом методеsetState.

Use Case

Как упоминалось ранее, этот метод может быть проблематичным. React официально предоставляет другое решение, поэтому, если вы обнаружите, что компонент работает медленно, вы можете использоватьReact.PureComponentзаменятьReact.component, Так и будетpropsа такжеstateОбеспечьте неглубокий контроль.

componentWillUpdate (скоро)

componentWillUpdate(nextProps, nextState)

Этот метод вызывается перед визуализацией.shouldComponentUpdateв новомpropsв компонент илиstateВызывается при смене.

Этот метод не вызывается во время первоначального рендеринга.

Обновлять:shouldComponentUpdateСобирается быть удален.

State

не может быть вызван в этом методеsetState.

Use Cases

shouldComponentUpdateметод вrender()будет вызываться точно перед этим, поэтому выполнение каких-либо операций, связанных с DOM, в этом методе нецелесообразно, так как срок его действия скоро истечет.

Общие варианты использования:

  • согласно сstateИзменения задают переменную
  • событие отправки
  • начать анимацию

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

Этот метод был добавлен в React 16.3 и работает сcomponentDidUpdate. Этот метод должен переопределить старый методshouldComponentUpdateвсе варианты использования.

getSnapshotBeforeUpdateВызывается перед визуализацией элемента и записью в DOM, таким образом вы получаете информацию о DOM (например, позицию прокрутки) до обновления DOM.

должен вернутьsnapshotзначение илиnull, независимо от того, что возвращается,shouldComponentUpdateможет получитьsnapshotпараметр.

Use Cases

Если вы хотите получить список или положение прокрутки в окне чата, вы можетеgetSnapshotBeforeUpdateполучить эту информацию. Затем поместите информацию о прокрутке какsnapshotвозвращаемое значение. Это позволяет после обновления DOMcomponentDidUpdateУстановите правильное положение прокрутки в .

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)

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

Use Cases

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

componentWillUnmount

componentWillUnmount()

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

State

Состояние не может быть установлено при выгрузке компонента

Use Cases

Используйте этот метод для очистки действий.

  • удалить вcomponentDidMountили прослушиватели событий, добавленные в другом месте
  • Отключить сетевой запрос
  • очистить таймер
  • очиститьcomponentDidMountDOM-элементы, созданные в
Категории