Библиотеки React Form: Redux Form, Formik и React Hook Form. Какая библиотека форм?
Формы всегда были темой, которую следует хорошо учитывать в веб-мире, и которая имеет различные трудности. В связи с растущей популярностью реактивной стороны были разработаны различные библиотеки по теме форм, которые стали доступны разработчикам.
Темой этой статьи будет обзор плюсов и минусов трех самых популярных библиотек форм на стороне реагирования, а именно Redux Form, Formik и React Hook Form.
Редукционная форма
Redux Form был впервые выпущен около 6 лет назад. Как следует из названия, это библиотека форм, которая работает в сочетании с хранилищем избыточности. Работа с магазином Redux в форме имеет как преимущества, так и недостатки.
+Легкий доступ к данным формы из любой точки приложения
Поскольку данные вашей формы сохраняются в хранилище избыточности, вы можете легко получить доступ к данным формы из любого компонента. Для некоторых конкретных сценариев это может быть существенным плюсом.
+Возможность использования с любым элементом ввода
Redux Form предлагает простое применение, если вы передаете правильные реквизиты в любом поле ввода, которое хотите (включая сторонние входы).
+Простота разработки
Вы можете создавать различные темы форм, используя поля Redux Form, и применять их везде, где хотите. Видеть:
Кроме того, проверки можно добавить с помощью Yup.
-Ненужное использование магазина Redux
Хотя мы говорим об этой ситуации как о пользе, на самом деле она вызывает некоторые критические ситуации. Все данные в форме записываются в данные глобального хранилища, используемые в Redux. Каждое входное событие вызывает постоянную запись новых данных и ненужную плотность данных. Это приведет к тому, что через некоторое время ваше приложение будет заполнено большим количеством данных.
-Производительность и эффективность
При изменении ввода, поскольку состояния в хранилище избыточности изменятся, это вызовет полный цикл избыточности и повторный рендеринг компонента. С увеличением данных формы через некоторое время это приведет к еще более критическим проблемам с производительностью. Ненужный повторный рендеринг увеличит нагрузку на приложение и увеличит время монтирования формы.
-Проблемы с Git
В настоящее время в репозитории Redux Form на github есть 469 проблем, к сожалению, большинство из них старые и до сих пор нерешенные.
Сводка
Таким образом, Redux Form не очень предпочтителен из-за его критических проблем с производительностью и 469 проблем с github.
Формик
Formik — еще одна библиотека форм, которая была опубликована около 4 лет назад. Это библиотека, которую разработчики React используют чаще всего, и у нее самое большое сообщество. Имеет собственное государственное управление. Поэтому ему не нужно дополнительное глобальное хранилище. Приступим к обзору Formik.
+Полезное развитие
Благодаря API Formik вы можете решать 3 самые сложные проблемы с формами, значениями элементов форм, проверками и сообщениями об ошибках и, наконец, систематически и эффективно отправлять значения форм. Он имеет компоненты, которые полностью совместимы с YUP для проверки. Formik сохраняет различные состояния, вы можете легко увидеть, действительна ли форма, не загрязнены ли элементы формы и т. д. Операции отправки выполняются в соответствии с этими состояниями, и вы можете легко изменить критерии. Таким образом, это обеспечивает большое удобство для разработчиков.
+Совместимость с проверками YUP и средой Typescript
С библиотекой YUP вы можете очень эффективно разрабатывать проверки своих форм, создавая правильные структуры. Кроме того, он имеет совместимую среду для проектов Typescript.
+Отличное сообщество
Поскольку Formik является успешной библиотекой форм и уже давно существует среди библиотек форм, вы можете получить доступ к обширным ресурсам. Существует множество примеров, которые могут понадобиться в самых разных сценариях.
+Не требуется дополнительное глобальное хранилище состояний для определенных сценариев форм
Поскольку в Formik есть управление состоянием, вы можете разрабатывать вложенные и пошаговые формы без необходимости какого-либо глобального управления состоянием.
-Имеет 9 различных зависимостей
В formik есть 9 различных зависимых пакетов в качестве содержимого пакета. Это может привести к конфликтам и несовместимости с другими пакетами в проекте.
-Визуализация с верхнего уровня формы
Когда данные формы изменяются, Formik повторно отображает самую внешнюю форму, а не измененный ввод. В этом случае это одновременно увеличивает время монтирования и снижает характеристики производительности. В структуре Formik нет изолированных входов.
-Слишком много повторного рендеринга
Formik, о котором мы упоминали в предыдущей статье, к сожалению, вызывает ненужный повторяющийся рендеринг, поскольку неизолированные входы и обёртки форм рендерятся каскадным образом. Изменение в одном поле приводит к отображению всей формы.
-Проблемы с Git
Formik в настоящее время имеет 510 выпусков. К сожалению, эту ситуацию нельзя оставлять без внимания.
Сводка
Это по-прежнему очень мощная библиотека с возможностями разработки и возможностью правильной настройки большинства структур форм. С YUP вы можете легко подготовить свои проверки и настроить структуры форм с помощью машинописного текста. Хотя архитектура Formik вызывает дополнительный рендеринг и определенное снижение производительности, нет абсолютно никаких препятствий для ее использования. Поскольку у него большое сообщество, вы можете легко получить доступ к ресурсам. Для стороны React Formik по-прежнему является сильным кандидатом.
Реагировать на хук
React Hook Form — это библиотека форм, выпущенная около 3 лет назад. При разработке были изучены неэффективные аспекты других библиотек форм, и в соответствии с этим были подготовлены собственные архитектуры. На сегодняшний день это одна из самых популярных и современных библиотек форм. Давайте познакомимся с формой React Hook.
+ Больше работы с меньшим количеством кода
По сравнению с другими библиотеками форм, благодаря преимуществу хука реакции в React Hook Form, вы можете написать гораздо меньше строк для создания структуры своей формы.
+Изолировать повторный рендеринг компонентов
React Hook Form отображает каждый элемент формы отдельно. Он не имеет каскадной структуры. Таким образом, предотвращается ненужный повторный рендеринг и использование событий.
+Не имеет зависимостей
Содержимое пакета — это библиотека, которая принадлежит только себе. В ней нет другой зависимости.
+Поддержка машинописного текста
Как и Formik, React Hook Forms поддерживает машинописный текст.
-Необходимо установить дополнительный пакет для использования с YUP
Если вы хотите выполнить проверку с помощью YUP, вам необходимо дополнительно установить пакет распознавателя.
-Для определенных сценариев форм требуется дополнительное глобальное хранилище состояний
В некоторых конкретных сценариях форм может потребоваться дополнительная библиотека состояний. Как ступенчатая форма и вложенная форма.
Сводка
React Hook Form проделал хорошую работу, решив то, что другие библиотеки форм делали неэффективно. В настоящее время React Hook Form является одним из самых сильных кандидатов, наряду с Formik. На самом деле, когда мы смотрим на производительность Formik, мы можем сказать, что React Hook Form лучше.
Вывод
В этой статье мы сравнили 3 самые популярные библиотеки форм React: Redux Form, Formik и React Hook Form. Мы не можем сказать наверняка, что вы должны выбрать эту библиотеку. Потому что в мире Интернета требования сильно различаются. Но если посмотреть на распространенные сценарии использования, Formik и React Hook Form кажутся хорошим выбором. Если для вас важны критерии производительности, React Hook Form на данный момент на шаг впереди.
До встречи в следующих статьях!
