React
Особенности
- В JSX в блоке return стоит оборачивать результат шаблона в ( <div>...</div> ); чтобы избежать проблем с обработчиками js кода, которые вставляют ; сами.
- Ключи помогают React идентифицировать, какой элемент был изменен, добавлен или удален для этого применяется атрибут key в компоненте.
Состояние и жизненный цикл
Локальное состояние является возможностью, доступной только для классов. 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