React PropTypes против Flow

101

PropTypes и Flow охватывают похожие вещи, но используют разные подходы. PropTypes может выдавать вам предупреждения во время выполнения, что может быть полезно для быстрого поиска искаженных ответов, исходящих от сервера и т. Д. Однако Flow, похоже, является будущим, и с такими концепциями, как generics, это очень гибкое решение. Также автозаполнение, предлагаемое Nuclide, является большим плюсом для Flow.

Мой вопрос теперь в том, какой путь лучше всего использовать при запуске нового проекта. Или может быть хорошим решением использовать оба типа - Flow и PropTypes? Проблема с использованием обоих заключается в том, что вы пишете много повторяющегося кода. Это пример приложения для музыкального плеера, которое я написал:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Оба определения в основном содержат одинаковую информацию, и при изменении типа данных оба определения необходимо обновить.

Я нашел этот плагин babel для преобразования объявлений типов в PropTypes, что могло бы стать решением.

Даниэльбюхеле
источник
1
Если вы хотите начать работу с Flow, попробуйте этот пост: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch
1
По опыту использования плагина, упомянутого в вопросе, не очень хорошая идея. Он не поддерживает все типы компонентов, полностью не работает с React Native начиная с v0.39 и, как правило, очень хрупок. Владелец репо обычно довольно быстро реагировал на эти проблемы, но, похоже, он потерял интерес и больше не может рассчитывать на его поддержание.
Tomty 01
Попробуйте tcomb через плагин Babel для статической проверки и проверки типов во время выполнения с помощью Flow и tcomb.
comerc

Ответы:

81

Спустя год после того, как я задал этот вопрос, я хотел рассказать о своем опыте решения этой проблемы.

По мере развития Flow я начал набирать с его помощью свою кодовую базу и не добавлял никаких новых определений PropType. Пока я думаю, что это хороший способ, потому что, как упоминалось выше, он позволяет вам не только вводить реквизиты, но и другие части вашего кода. Это очень удобно, например, когда у вас есть копия ваших props в состоянии, которое может быть изменено пользователем. Кроме того, автоматическое завершение в IDE - отличный выигрыш.

Автоматические преобразователи в ту или иную сторону не получили особого успеха. Итак, для новых проектов я бы действительно рекомендовал использовать Flow over PropTypes (на случай, если вы не хотите печатать дважды).

Даниэльбюхеле
источник
какую IDE вы используете? Веб-буря?
sergey.tyan
3
Я использую Atom с плагином ide-flowtype.
danielbuechele
вам все еще нужны propTypes при использовании childContextTypes - stackoverflow.com/questions/42395113/…
Shyam
3
больше не нужно использовать propTypes при обработке дочерних контекстов из-за нового контекстного API: reactjs.org/docs/context.html
SteveB
35

За исключением того, что оба относятся к очень широкой области проверки типов, между ними нет особого сходства.

Flow - это инструмент статического анализа, который использует надмножество языка, позволяя вам добавлять аннотации типов ко всему вашему коду и выявлять целый класс ошибок во время компиляции.

PropTypes - это базовая программа проверки типов, которая была исправлена ​​на React. Он не может ничего проверить, кроме типов пропсов, передаваемых данному компоненту.

Если вам нужна более гибкая проверка типов для всего проекта, то вам подойдет Flow / TypeScript. Пока вы передаете в компоненты только аннотированные типы, PropTypes вам не понадобится.

Если вы просто хотите проверить типы опор, не усложняйте остальную часть кода и выберите более простой вариант.

Дэн Принс
источник
11
Да, они очень разные по принципу работы. Однако, думаю, цель их использования очень схожа. Но одна вещь, на которую вы указали, является хорошим моментом: Flow позволяет вам покрыть большую часть вашей кодовой базы, тогда как вы ограничены реквизитами при использовании PropTypes.
danielbuechele
2
Цель использования очень похожа, только если вы используете Flow только для проверки типов опор. Один - это в основном язык, другой - едва ли библиотека.
Дэн Принс
Полностью согласен с @DanPrince. И я не думаю, что это хорошая идея проверять искаженные ответы от сервера с помощью PropTypes. Лучше, если у вас есть ручные проверки для этого, и ваш пользовательский интерфейс правильно реагирует (например, отображает предупреждающее сообщение), а не просто выводит предупреждение в консоль.
Ян Takushevich
6
@YanTakushevich Вам нужно сделать и то, и другое. В любом случае PropTypes следует отключить во время производства, поэтому вам всегда нужны ручные проверки, чтобы убедиться, что ваши пользователи имеют хороший опыт. Однако PropTypes могут быть очень полезны для предупреждений во время разработки. Это просто хорошая подстраховка, чтобы вы ничего не забыли.
ndbroadbent
27

Я считаю, что упущенный момент здесь заключается в том, что Flow - это статическая проверка, а PropTypes - это средство проверки времени выполнения , что означает

  • Flow может перехватывать ошибки восходящего потока при кодировании: теоретически он может пропустить некоторые ошибки, о которых вы не знаете (например, если вы недостаточно реализовали поток в своем проекте или в случае глубоких вложенных объектов)
  • PropTypes поймает их ниже по течению во время тестирования, поэтому он никогда не пропустит
Rewieer
источник
1
вот специальный плагин babel уже npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg
15

Попробуйте объявить тип реквизита, используя только Flow. Укажите неправильный тип, например число вместо строки. Вы увидите, что это будет отмечено в коде, который использует компонент в вашем редакторе с поддержкой Flow. Однако это не приведет к сбою тестов, и ваше приложение все равно будет работать.

Теперь добавьте использование React PropTypes с неправильным типом. Это БУДЕТ вызывать сбой тестов и помечать их в консоли браузера при запуске приложения.

Исходя из этого, кажется, что даже если используется Flow, также следует указать PropTypes.

Марк Фолькманн
источник
Это зависит от того, как выполняются тесты, если вы используете тестирование моментальных снимков jest, тесты завершатся ошибкой с недопустимыми значениями свойств.
Александр Борела
3
Преимущество ошибки в вашей IDE заключается в том, что вы видите ее непосредственно перед запуском тестов.
Том Фенек
Плюс 1 подходит для ремня и подтяжек.
Дэвид А. Грей