Последний минорный релиз добавляет поддержку часто запрашиваемой фичи — событий указателей (pointer events)!
Также, он включает исправления для метода getDerivedStateFromProps
. Полный список изменений доступен ниже.
События указателей
Появились следующие типы событий в React DOM:
onPointerDown
onPointerMove
onPointerUp
onPointerCancel
onGotPointerCapture
onLostPointerCapture
onPointerEnter
onPointerLeave
onPointerOver
onPointerOut
Обратите внимание, что эти события будут работать только в браузерах, поддерживающих спецификацию событий указателей. (На момент написания статьи к таким браузерам относятся Chrome, Firefox, Edge и Internet Explorer.) Если ваше приложение зависит от событий указателей, мы рекомендуем использовать сторонний полифил. Было решено не включать полифил в React DOM, чтобы не увеличивать размер итогового бандла.
Рекомендуем посмотреть этот пример на CodeSandbox.
Огромное спасибо человеку по имени Philipp Spiess за работу над этим изменением!
Исправление для getDerivedStateFromProps
getDerivedStateFromProps
теперь вызывается каждый раз при отрисовке компонента, вне зависимости от причины его изменения. До этого он вызывался только когда компонент перерисовывался его родителем и не срабатывал при вызове setState
компонента. Это было упущение первоначальной реализации метода, и оно сейчас исправлено. Предыдущее поведение было более похоже на componentWillReceiveProps
, но в его улучшенном состоянии обеспечивается совместимость с режимом асинхронного рендеринга, который скоро появится в React.
Это исправление не повлияет на большинство приложений, но может вызвать проблемы у небольшой доли компонентов. Те редкие случаи, когда это может случиться, попадают под одну из двух категорий:
- Избегайте побочных (side) эффектов в
getDerivedStateFromProps
Как и методrender
,getDerivedStateFromProps
должен быть чистой функцией, работающей только с пропсами и состоянием. Побочные эффекты никогда не поддерживались вgetDerivedStateFromProps
, но так как теперь он срабатывает чаще, чем раньше, это изменение может выявить необнаруженные ранее баги.
Код с побочными эффектами должен быть перенесен в другие методы: например, вызовы Flux-событий должны находиться непосредственно в обработчике событий, а манипуляции с DOM'ом должны производиться вcomponentDidMount
илиcomponentDidUpdate
. Почитайте нашу недавнюю статью на тему подготовки к асинхронному рендерингу. - Сравнивайте новые пропсы с предыдущими при вычислении контролируемых значений
Следующий кусок кода предполагает, чтоgetDerivedStateFromProps
вызовется при изменении пропсов:
static getDerivedStateFromProps(props, state) {
if (props.value !== state.controlledValue) {
return {
// Так как этот метод срабатывает при изменении и пропсов, и состояния,
// изменение controlledValue через setState будет игнорироваться, потому что значение из пропсов всегда будет перезаписывать его. Та-дам!
controlledValue: props.value,
};
}
return null;
}
Один из возможных способов решения — это сравнивать новое значение с предыдущим, сохраняя предыдущее в состояние:
static getDerivedStateFromProps(props, state) {
const prevProps = state.prevProps;
// Сравниваем новый пропс со старым
const controlledValue =
prevProps.value !== props.value
? props.value
: state.controlledValue;
return {
// Сохраняем старые пропсы в состоянии
prevProps: props,
controlledValue,
};
}
Однако, старайтесь избегать смешивания пропсов и состояния таким образом — довольно редко случается так, что состояние должно дублировать значение из пропсов, и такая практика может привести к неявным багам. Желательно иметь единый верный источник для любого значения и по возможности передавать сосотяние вышестоящему компоненту для использования в других компонентах. Большинство случаев использования getDerivedStateFromProps
(и его предшественника componentWillReceiveProps
) решается перенесением управления сосотянием в вышестоящий компонент.
Важно помнить, что большинству компонентов не требуется getDerivedStateFromProps
. Он не задумывался как точная замена componentWillReceiveProps
. В ближайшие недели мы выложим пост с рекомендациями по тому, как использовать (и не использовать) getDerivedStateFromProps
.
Полный список изменений (Сhangelog)
P.S. Если вы хотели бы увидеть какой-то перевод из мира React пишите в личку или telegram/vk