Многие крупномасштабные корпоративные приложения — как внутренние, так и внешние — требуют значительного объема обработки форм. Он действует как средство, с помощью которого пользователи предоставляют данные, которые поступают в механизм системы и которые впоследствии могут быть проанализированы таким образом, чтобы отчеты генерировались по-новому и представлялись заинтересованным сторонам или клиентам для различных целей.

С точки зрения UX/CX и бизнеса важно, чтобы обработка форм осуществлялась таким образом, чтобы пользователи были довольны предоставлением полного и точного набора данных надежным и своевременным образом, без разочарований или затруднений. Несоблюдение этого требования может привести к тому, что пользователь предоставит минимальный (или, что еще хуже, неточный) объем информации, чтобы как можно быстрее пройти этапы формы. Плохие данные приводят к плохим продуктам и плохому бизнесу.

React предоставляет средства для создания высокоэффективных интерфейсов приложений. При использовании инструмента управления состоянием, такого как Redux, можно успешно создать интеллектуальную и эффективную форму с различными типами ввода и правилами проверки, чтобы соответствовать требованиям, изложенным выше. Однако, в зависимости от формы и ее размера, это может привести к дорогостоящему уровню детализации. Крупномасштабные приложения часто требуют очень комплексных и сложных рабочих процессов для своих форм со сложными правилами проверки.

В этих сценариях создание эффективного обработчика формы, хотя и возможно, может быть дорогостоящим с точки зрения разработки. В то время как хороший уровень эффективности может быть обеспечен путем создания полей формы в виде многократно используемых компонентов или компонентов более высокого порядка и путем создания набора полезных служебных функций, затраты могут быть достигнуты за счет длины и несоответствия кода. . Чтобы форма React работала должным образом, различные поля должны быть связаны с состоянием. Redux-form — очень хорошая библиотека, которая позволяет таким образом создавать эффективные формы. Он зарекомендовал себя как стандартный способ сделать это. Однако это связано с некоторыми разочаровывающими (и значительными) затратами на производительность: по мере обновления полей накладные расходы на производительность растут по мере обновления состояния. Особенно это касается больших приложений.

С 2018 года популярность конкретной библиотеки для создания и обработки форм чрезвычайно выросла, поскольку она очень эффективно справляется с вышеупомянутыми затратами. Formik — небольшая и изящная библиотека (12,7 КБ против 22,5 КБ у Redux-form), разработанная Джаредом Палмером. Одним из его руководящих принципов является убеждение Дэна Абрамова в том, что состояние ввода формы не должно отслеживаться в Redux и что оно по своей сути является локальным (https://github.com/reactjs/redux/issues/ 1287#issuecomment-175351978). Поэтому подключение его к Redux не следует рассматривать как необходимое. Другой основной мотивацией является серьезная проблема с производительностью, описанная выше, из-за которой состояние обновляется каждый раз, когда обновляется поле ввода.

Formik обрабатывает данные формы локально и связывает их с состоянием только на локальном уровне. Он вводится как компонент (<Formik />), а форма настраивается с помощью набора реквизитов, которые затем передаются ей. К ним относятся начальные значения (initialValues) для полей, правила проверки (validate) и обработчики событий (handleChange, handleBlur и handleSubmit). Конечно, некоторые из них могут быть импортированы как служебные функции или компоненты, в зависимости от требований приложения. Внутри функции handleSubmit в конце обычно вызывается функция Formik с именем setSubmitting путем передачи ей логического значения false, сообщающего компоненту <Formik /> о завершении отправки.

Некоторые из приятных функций Formik включают в себя некоторые компоненты, которые поставляются с ним, чтобы еще больше уменьшить многословность кода: <Form />, <Field /> и <ErrorMessage />. Каждый из них должен быть импортирован из Formik вместе с компонентом <Formik />. <Form /> оборачивает HTML-элемент <form /> и автоматически подключает к нему функции Formik handleSubmit и handleReset. По умолчанию <Field /> отображается как HTML-элемент <input />. Но, указав type, это можно изменить. Кроме того, здесь можно указать пользовательский компонент с атрибутом component. <ErrorMessage /> отображает конкретное сообщение об ошибке для определенного поля, но только в том случае, если данное поле было затронуто и для этого поля существует сообщение error (как указано в реквизите Formik validate, упомянутом выше).

Относительно проверки с помощью Formik: хотя это и не требуется, Ага поддерживается Formik для этой цели. Действительно, Yup — это то, что активно используют разработчики Formik. В случае, когда эта или другая сторонняя библиотека проверки предпочтительнее для использования с Formik, вместо реквизита validate следует использовать реквизит validationSchema для компонента <Formik />. Значение, которое передается этой validationSchema опоре, может быть функцией, которая вызывает эту стороннюю библиотеку.

Formik позволяет создавать и настраивать формы в одном месте. Он предотвращает ненужные накладные расходы на производительность, связанные с Redux-формой, воздерживаясь от подключения входных данных формы к дереву состояний и имеет небольшой размер. Несмотря на то, что он поставляется с некоторыми полезными функциями, он обеспечивает полную настройку и совместимость с другими сторонними библиотеками, такими как Yup. Это гарантирует сохранение одного из ключевых преимуществ React по сравнению с другими библиотеками/фреймворками JavaScript: разработчик не ограничен и может принимать собственные решения. И, наконец, значительно увеличивается скорость разработки комплексных форм для крупномасштабных корпоративных приложений, что повышает пропускную способность и скорость спринта (для тех, кто работает в гибкой среде).

Таким образом, преимущества развития, предлагаемые Formik, являются существенными и, как таковые, соответствуют преимуществам для бизнеса.

Для дальнейшего чтения см. официальную документацию Formik по адресу https://jaredpalmer.com/formik/ или ознакомьтесь с полным репозиторием по адресу https://github.com/jaredpalmer/formik.