Хабрахабр

[Перевод] React v16.4.0: События указателей

Последний минорный релиз добавляет поддержку часто запрашиваемой фичи — событий указателей (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

До этого он вызывался только когда компонент перерисовывался его родителем и не срабатывал при вызове setState компонента. getDerivedStateFromProps теперь вызывается каждый раз при отрисовке компонента, вне зависимости от причины его изменения. Предыдущее поведение было более похоже на componentWillReceiveProps, но в его улучшенном состоянии обеспечивается совместимость с режимом асинхронного рендеринга, который скоро появится в React. Это было упущение первоначальной реализации метода, и оно сейчас исправлено.

Те редкие случаи, когда это может случиться, попадают под одну из двух категорий: Это исправление не повлияет на большинство приложений, но может вызвать проблемы у небольшой доли компонентов.

  1. Избегайте побочных (side) эффектов в getDerivedStateFromProps
    Как и метод render, getDerivedStateFromProps должен быть чистой функцией, работающей только с пропсами и состоянием. Побочные эффекты никогда не поддерживались в getDerivedStateFromProps, но так как теперь он срабатывает чаще, чем раньше, это изменение может выявить необнаруженные ранее баги.
    Код с побочными эффектами должен быть перенесен в другие методы: например, вызовы Flux-событий должны находиться непосредственно в обработчике событий, а манипуляции с DOM'ом должны производиться в componentDidMount или componentDidUpdate. Почитайте нашу недавнюю статью на тему подготовки к асинхронному рендерингу.
  2. Сравнивайте новые пропсы с предыдущими при вычислении контролируемых значений
    Следующий кусок кода предполагает, что getDerivedStateFromProps вызовется при изменении пропсов:

static getDerivedStateFromProps(props, state) ; } 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) решается перенесением управления сосотянием в вышестоящий компонент.

Он не задумывался как точная замена componentWillReceiveProps. Важно помнить, что большинству компонентов не требуется getDerivedStateFromProps. В ближайшие недели мы выложим пост с рекомендациями по тому, как использовать (и не использовать) getDerivedStateFromProps.

Полный список изменений (Сhangelog)

S. P. Если вы хотели бы увидеть какой-то перевод из мира React пишите в личку или telegram/vk

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть