- PVSM.RU - https://www.pvsm.ru -
Последний минорный релиз добавляет поддержку часто запрашиваемой фичи — событий указателей (pointer events)!
Также, он включает исправления для метода getDerivedStateFromProps
. Полный список изменений доступен ниже.
Появились следующие типы событий в React DOM:
onPointerDown
onPointerMove
onPointerUp
onPointerCancel
onGotPointerCapture
onLostPointerCapture
onPointerEnter
onPointerLeave
onPointerOver
onPointerOut
Обратите внимание, что эти события будут работать только в браузерах, поддерживающих спецификацию событий указателей [1]. (На момент написания статьи к таким браузерам относятся Chrome, Firefox, Edge и Internet Explorer.) Если ваше приложение зависит от событий указателей, мы рекомендуем использовать сторонний полифил. Было решено не включать полифил в React DOM, чтобы не увеличивать размер итогового бандла.
Рекомендуем посмотреть этот пример на CodeSandbox [2].
Огромное спасибо человеку по имени Philipp Spiess [3] за работу над этим изменением!
getDerivedStateFromProps
getDerivedStateFromProps
теперь вызывается каждый раз при отрисовке компонента, вне зависимости от причины его изменения. До этого он вызывался только когда компонент перерисовывался его родителем и не срабатывал при вызове setState
компонента. Это было упущение первоначальной реализации метода, и оно сейчас исправлено. Предыдущее поведение было более похоже на componentWillReceiveProps
, но в его улучшенном состоянии обеспечивается совместимость с режимом асинхронного рендеринга, который скоро появится в React.
Это исправление не повлияет на большинство приложений, но может вызвать проблемы у небольшой доли компонентов. Те редкие случаи, когда это может случиться, попадают под одну из двух категорий:
getDerivedStateFromProps
render
, getDerivedStateFromProps
должен быть чистой функцией, работающей только с пропсами и состоянием. Побочные эффекты никогда не поддерживались в getDerivedStateFromProps
, но так как теперь он срабатывает чаще, чем раньше, это изменение может выявить необнаруженные ранее баги.componentDidMount
или componentDidUpdate
. Почитайте нашу недавнюю статью на тему подготовки к асинхронному рендерингу [4].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,
};
}
Однако, старайтесь избегать смешивания пропсов и состояния таким образом — довольно редко случается так, что состояние должно дублировать значение из пропсов, и такая практика может привести к неявным багам. Желательно иметь единый верный источник для любого значения и по возможности передавать сосотяние вышестоящему компоненту [5] для использования в других компонентах. Большинство случаев использования getDerivedStateFromProps
(и его предшественника componentWillReceiveProps
) решается перенесением управления сосотянием в вышестоящий компонент.
Важно помнить, что большинству компонентов не требуется getDerivedStateFromProps
. Он не задумывался как точная замена componentWillReceiveProps
. В ближайшие недели мы выложим пост с рекомендациями по тому, как использовать (и не использовать) getDerivedStateFromProps
.
Полный список изменений [6] (Сhangelog)
P.S. Если вы хотели бы увидеть какой-то перевод из мира React пишите в личку или telegram [7]/vk [8]
Автор: maxfarseer
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/281004
Ссылки в тексте:
[1] событий указателей: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
[2] этот пример на CodeSandbox: https://codesandbox.io/s/q83r7nrwv6
[3] Philipp Spiess: https://github.com/philipp-spiess
[4] подготовки к асинхронному рендерингу: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
[5] передавать сосотяние вышестоящему компоненту: https://reactjs.org/docs/lifting-state-up.html
[6] Полный список изменений: https://reactjs.org/blog/2018/05/23/react-v-16-4.html#changelog
[7] telegram: https://t.me/maxfarseer
[8] vk: https://vk.com/maxpfrontend
[9] Источник: https://habr.com/post/359264/?utm_campaign=359264
Нажмите здесь для печати.