React: различия между версиями

Материал из Home Wiki
Перейти к навигации Перейти к поиску
Строка 7: Строка 7:


Когда компонент в какой-то момент удалён из DOM, React вызывает метод componentWillUnmount() жизненного цикла.
Когда компонент в какой-то момент удалён из DOM, React вызывает метод componentWillUnmount() жизненного цикла.
https://m.habr.com/ru/post/358090/
== Constructor ==
ДЕЛАЙТЕ:
* Устанавливайте изначальное состояние компонента
* Если не используется class properties синтаксис – подготовьте все поля класса и вызовете bind на тех функциях, что будут переданы как коллбеки.
НЕ ДЕЛАЙТЕ:
* Не выполняйте никаких сайд-эффектов (side effects) (Вызовы AJAX и т.д.)
== [deprecated] componentWillMount ==
ДЕЛАЙТЕ:
* Обновляйте состояние через this.setState
* Выполняйте последние оптимизации
* Вызывайте сайд-эффекты (Вызов AJAX и т.д.) только в случае server-side-rendering.
НЕ ДЕЛАЙТЕ:
* Не выполняйте никаких сайд-эффектов (Вызов AJAX и т.д.) на стороне клиента.
== [deprecated] componentWillReceiveProps(nextProps) ==
ДЕЛАЙТЕ:
* Синхронизируйте состояние (state) с props
НЕ ДЕЛАЙТЕ:
* Не выполняйте никаких сайд-эффектов (Вызовы AJAX и т.д.)
== shouldComponentUpdate(nextProps, nextState, nextContext) ==
ДЕЛАЙТЕ:
* Используйте для оптимизации производительности компонента
НЕ ДЕЛАЙТЕ:
* Не выполняйте никаких сайд-эффектов (Вызовы AJAX и т.д.)
* Не вызывайте this.setState
== [deprecated] componentWillUpdate(nextProps, nextState) ==
ДЕЛАЙТЕ:
* Синхронизируйте состояние (state) с props
НЕ ДЕЛАЙТЕ:
* Не выполняйте никаких сайд-эффектов (Вызовы AJAX и т.д.)
== componentDidUpdate(prevProps, prevState, prevContext) ==
ДЕЛАЙТЕ:
* Выполняйте сайд-эффекты (Вызовы AJAX и т.д.)
НЕ ДЕЛАЙТЕ:
* Не вызывайте this.setState т.к. это будет вызывать циклическую перерисовку.
== componentDidCatch(errorString, errorInfo) ==
С помощью этого дополнения вы можете сделать ваш родительский элемент обработчиком ошибок.
Когда происходит какая-либо ошибка, эта функция вызывается с следующими параметрами:
* errorString — .toString() сообщение о ошибке
* errorInfo – объект с одним полем componentStack, которое содержит стектрейс, где произошла ошибка.
== componentDidMount ==
ДЕЛАЙТЕ:
* Выполняйте сайд-эффекты (Вызовы AJAX и т.д.)
НЕ ДЕЛАЙТЕ:
* Не вызывайте this.setState т.к. это вызовет перерисовку.
== componentWillUnmount ==
ДЕЛАЙТЕ:
* Удаляйте таймеры и слушателей (listeners) созданных во время жизни компонента.
НЕ ДЕЛАЙТЕ:
* Не вызывайте this.setState, не стартуйте новых слушателей или таймеры.
== React 16.3+ жизненный цикл компонента ==
=== static getDerivedStateFromProps(nextProps, prevState) ===
Основная ответственность этой новой функции — это убедиться, что состояние (state) и props синхронизированы, когда это необходимо. Ее основной смысл — это замена componentWillRecieveProps.
=== getSnapshotBeforeUpdate(prevProps, prevState) ===
Другая из двух новых функций, вызывается в так называемой “pre-commit фазе”, прямо перед изменениями из VDOM, которые должны быть отображены в DOM.
=== Устаревшие функции ===
Следующие функции будут маркированы как устаревшие и в следующих релизах переименованы:
* componentWillRecieveProps – UNSAFE_componentWillRecieveProps
* componentWillUpdate – UNSAFE_componentWillUpdate

Версия 06:12, 8 февраля 2019

Состояние и жизненный цикл

Локальное состояние является возможностью, доступной только для классов. https://learn-reactjs.ru/basics/state-and-lifecycle

Метод componentDidMount() срабатывает после того, как компонент был отрисован в DOM.

Когда компонент в какой-то момент удалён из DOM, React вызывает метод componentWillUnmount() жизненного цикла.

https://m.habr.com/ru/post/358090/

Constructor

ДЕЛАЙТЕ:

  • Устанавливайте изначальное состояние компонента
  • Если не используется class properties синтаксис – подготовьте все поля класса и вызовете bind на тех функциях, что будут переданы как коллбеки.

НЕ ДЕЛАЙТЕ:

  • Не выполняйте никаких сайд-эффектов (side effects) (Вызовы AJAX и т.д.)

[deprecated] componentWillMount

ДЕЛАЙТЕ:

  • Обновляйте состояние через this.setState
  • Выполняйте последние оптимизации
  • Вызывайте сайд-эффекты (Вызов AJAX и т.д.) только в случае server-side-rendering.

НЕ ДЕЛАЙТЕ:

  • Не выполняйте никаких сайд-эффектов (Вызов AJAX и т.д.) на стороне клиента.

[deprecated] componentWillReceiveProps(nextProps)

ДЕЛАЙТЕ:

  • Синхронизируйте состояние (state) с props

НЕ ДЕЛАЙТЕ:

  • Не выполняйте никаких сайд-эффектов (Вызовы AJAX и т.д.)

shouldComponentUpdate(nextProps, nextState, nextContext)

ДЕЛАЙТЕ:

  • Используйте для оптимизации производительности компонента

НЕ ДЕЛАЙТЕ:

  • Не выполняйте никаких сайд-эффектов (Вызовы AJAX и т.д.)
  • Не вызывайте this.setState

[deprecated] componentWillUpdate(nextProps, nextState)

ДЕЛАЙТЕ:

  • Синхронизируйте состояние (state) с props

НЕ ДЕЛАЙТЕ:

  • Не выполняйте никаких сайд-эффектов (Вызовы AJAX и т.д.)

componentDidUpdate(prevProps, prevState, prevContext)

ДЕЛАЙТЕ:

  • Выполняйте сайд-эффекты (Вызовы AJAX и т.д.)

НЕ ДЕЛАЙТЕ:

  • Не вызывайте this.setState т.к. это будет вызывать циклическую перерисовку.

componentDidCatch(errorString, errorInfo)

С помощью этого дополнения вы можете сделать ваш родительский элемент обработчиком ошибок.

Когда происходит какая-либо ошибка, эта функция вызывается с следующими параметрами:

  • errorString — .toString() сообщение о ошибке
  • errorInfo – объект с одним полем componentStack, которое содержит стектрейс, где произошла ошибка.

componentDidMount

ДЕЛАЙТЕ:

  • Выполняйте сайд-эффекты (Вызовы AJAX и т.д.)

НЕ ДЕЛАЙТЕ:

  • Не вызывайте this.setState т.к. это вызовет перерисовку.

componentWillUnmount

ДЕЛАЙТЕ:

  • Удаляйте таймеры и слушателей (listeners) созданных во время жизни компонента.

НЕ ДЕЛАЙТЕ:

  • Не вызывайте this.setState, не стартуйте новых слушателей или таймеры.

React 16.3+ жизненный цикл компонента

static getDerivedStateFromProps(nextProps, prevState)

Основная ответственность этой новой функции — это убедиться, что состояние (state) и props синхронизированы, когда это необходимо. Ее основной смысл — это замена componentWillRecieveProps.

getSnapshotBeforeUpdate(prevProps, prevState)

Другая из двух новых функций, вызывается в так называемой “pre-commit фазе”, прямо перед изменениями из VDOM, которые должны быть отображены в DOM.

Устаревшие функции

Следующие функции будут маркированы как устаревшие и в следующих релизах переименованы:

  • componentWillRecieveProps – UNSAFE_componentWillRecieveProps
  • componentWillUpdate – UNSAFE_componentWillUpdate