Использование React с Flow

Разработчики часто используют Flow и React вместе, поэтому важно, чтобы Flow мог эффективно проверять типы как распространённых, так и продвинутых шаблонов React. В этом руководстве вы узнаете, как использовать Flow для создания более безопасных приложений React.

В этом руководстве предполагается, что вы знакомы с основами React; мы сосредоточимся на добавлении типов для уже знакомых вам шаблонов. Мы будем использовать примеры на основе react-dom, но все эти шаблоны также работают в других средах, например в react-native.

Синтаксис компонентов и хуков​

В Flow есть специальный синтаксис component и hook для написания компонентов и хуков React; это стандартный способ писать React с Flow. Этот синтаксис включён по умолчанию, обеспечивает первоклассную поддержку компонентов и хуков в системе типов и позволяет Flow напрямую обеспечивать соблюдение правил React.

Настройте цепочку инструментов, следуя инструкциям по установке, а затем прочитайте документацию по синтаксису компонентов и синтаксису хуков. Старые шаблоны функциональных компонентов и компонентов-классов по-прежнему проходят проверку типов, но считаются устаревшими: в новом коде предпочтительнее использовать синтаксис компонентов и хуков.

Настройка Flow с React​

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

Среды выполнения React​

Flow поддерживает параметры среды выполнения @babel/plugin-transform-react-jsx, необходимые для использования JSX без явного импорта пространства имён React.

Если вы используете новую автоматическую среду выполнения, добавьте эту конфигурацию в .flowconfig, чтобы Flow знал, что нужно автоматически импортировать jsx:

[options]
react.runtime=automatic

См. также​

• Синтаксис компонентов — специальный синтаксис Flow для объявления компонентов React
• Синтаксис хуков — специальный синтаксис Flow для объявления пользовательских хуков
• Типы компонентов — типизация ссылок на компоненты и шаблонов высшего порядка
• Типы рендеринга — управление тем, что компоненту разрешено отображать
• Обработка событий — типизация обработчиков событий и синтетических событий
• Рефы — типизация useRef, createRef и рефов-колбэков
• Типы React — React.Node, React.MixedElement и другие встроенные типы
• Функциональные компоненты и компоненты-классы — устаревшие шаблоны типизации компонентов без синтаксиса компонентов
• Компоненты высшего порядка — типизация шаблонов HOC