React

Особенности

• В JSX в блоке return стоит оборачивать результат шаблона в (
  ...
  ); чтобы избежать проблем с обработчиками js кода, которые вставляют ; сами.

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

Локальное состояние является возможностью, доступной только для классов. 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