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

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

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

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

Автор: maxfarseer

Источник