React Forms — Formik vs. Hook-Form vs. Final-Form

Здравствуйте, кодеры!

Формы являются важной частью каждого приложения, от регистрации, входа в систему или сбора опроса от наших пользователей. Формы могут показаться простыми, но это не так. Цель этой статьи — предоставить сравнение наиболее часто используемых форм React Forms с плюсами, минусами и примерами кода: Formik, React-Hook-Form и React-Final-Form. Для новичков React — это суперпопулярная JS-библиотека для создания интерактивных пользовательских интерфейсов, созданная компанией Facebook.

Вот темы, рассматриваемые в этом материале:

  • ✅ Зачем нам нужны формы?
  • ✅ Знакомство с React (краткое)
  • Formik: плюсы, минусы и пример
  • React-Hook-Form: плюсы, минусы и пример
  • React-Final-Form: плюсы, минусы и образец
  • ✅ Выводы и ресурсы
  • ✅ Бесплатный React Sample: ягоды (используйте Formik)
  • ✅ Бесплатный React Sample: Datta Able (используйте Formik)

✨ Зачем нужны формы

Как упоминалось выше, формы могут показаться тривиальными и простыми в кодировании, но это не так во всех случаях. Формы требуют проверки информации, предоставляемой пользователем, и кодирование нескольких форм в разных частях наших проектов может занять много времени. Чтобы решить эту проблему, мы можем использовать библиотеки Form, построенные поверх React, выпущенные в экосистеме с открытым исходным кодом, такие как Formik или `React- Final Form.

Все упомянутые библиотеки просты в использовании и обладают (почти) всеми функциональными возможностями, которые могут понадобиться нам в наших проектах.

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


✨ Что такое React

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

Как вы увидите, React — это не фреймворк, а библиотека. Это означает, что он не является законченным решением.

Новичок в React? Ознакомьтесь с этим полным руководством по началу работы с React.



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

Примеры библиотек, которые вам могут понадобиться: Axios для HTTP-запросов, Redux для управления состояниями, React-router-dom для маршрутизации, React-hook-form для построения форм.


✨ Почему стоит выбрать правильную библиотеку форм?

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

Мы начнем с Formik.


✨ Formik

Formik — это библиотека форм React с открытым исходным кодом, автором которой является Джаред Палмар. Джаред создал Formik из разочарования, когда ему пришлось создать более 30 форм для своего приложения. Он хотел иметь стандартный способ создания и управления всеми формами в своем приложении. Для этого он создал Formik.


Эта библиотека поможет вам справиться с тремя самыми неприятными, но важными частями создания форм:

  • ? Получение значений в состояние формы и из него
  • ? Валидация и сообщения об ошибках
  • ? Обработка отправки формы

Вы можете легко построить форму с помощью компонентов Formik <Formik />, <Form />, <Field /> и <ErrorMessage />. Создать форму с помощью Formik очень просто. Позже в этом разделе я покажу вам, как построить форму и проверить ее с помощью Formik.
Перед этим давайте рассмотрим несколько плюсов и минусов Formik.


Плюсы Formik

  • Декларативные компоненты (, , )
  • 29k+ звезд на Github
  • Интеграция с популярной библиотекой валидации: Yup
  • Поддержка внешних библиотек пользовательского интерфейса.

Formik Cons

  • 7 зависимостей и 12.7 кБ в размере
  • Нет встроенной валидации
  • Много шаблонного кода (по сравнению с React-hook-form)

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


Установите Formik

Чтобы создать форму с помощью Formik, сначала нам нужно установить его. Мы можем сделать это с помощью следующих команд:

$ npm install formik
// OR
$ yarn add formik
Войти в полноэкранный режим Выйти из полноэкранного режима

Исходный код формы

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';

const Basic = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      onSubmit={async (values) => {
        await new Promise((r) => setTimeout(r, 500));
        alert(JSON.stringify(values, null, 2));
      }}
    >
      <Form>
        <label htmlFor="firstName">First Name</label>
        <Field id="firstName" name="firstName" placeholder="Jane" />

        <label htmlFor="lastName">Last Name</label>
        <Field id="lastName" name="lastName" placeholder="Doe" />

        <label htmlFor="email">Email</label>
        <Field
          id="email"
          name="email"
          placeholder="jane@acme.com"
          type="email"
        />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

ReactDOM.render(<Basic />, document.getElementById('root'));
Войти в полноэкранный режим Выйти из полноэкранного режима

Как вы можете видеть, это простая форма. Мы еще не добавили валидацию. Я сделаю это в следующем разделе.

Для создания формы мы вызвали компонент <Formik>. Он принимает два реквизита: initialValues объект, который определяет начальные значения полей ввода и onSubmit метод, который обрабатывает отправку формы.

Как вы заметили, эта форма является самодекларативной. Это означает, что код описывает происходящее. Вам не потребуется много усилий, чтобы понять его.

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


? Валидация формы в Formik

Одна из причин создания Formik — сделать валидацию формы необременительной. Formik поддерживает синхронную и асинхронную Form-level и Field-level validation. Он также обеспечивает проверку на уровне формы на основе схемы через Yup. Yup — очень популярная библиотека валидации форм.

  • ? Валидация на уровне формы
  • ? Валидация на уровне поля

Вот оно. Полная форма, построенная с помощью Formik. Для получения дополнительных ресурсов, не стесняйтесь обращаться к ним:

  • ? https://formik.org/docs/tutorial
  • ? https://blog.logrocket.com/building-forms-formik-react/

✨ React Hook Form

React-Hook-Form — это библиотека форм, построенная на основе крючков React. Эта библиотека использует другой подход к построению формы. Она изолирует повторные рендеринги компонентов, используя неконтролируемые компоненты.

В отличие от Formik, React-Hook-Form имеет нулевые зависимости. А размер в два раза меньше Formik ~= 8.6KB (minified + gzipped).


React Hook Form уменьшает количество кода, который вам нужно написать, убирая ненужные повторные рендеры. Для валидации форм React-hook-form использует стандартный подход, основанный на Html. Вы можете легко создать форму с помощью React-hook-form с помощью хука useForm. Я покажу вам, как это сделать позже в этом посте.

Но сейчас давайте рассмотрим несколько плюсов и минусов React Hook Form.


Плюсы React-Hook-Form

  • Меньше шаблонного кода, нулевая зависимость
  • Нет проблем на Github (что?)
  • Размер 8,6 кб (минифицированный и gzipped)
  • Использует встроенную HTML валидацию формы
  • Поддерживает Yup валидацию формы.

Минусы React-Hook-Form

  • Вам необходимо использовать Yup или встроенную валидацию формы

Установите React-Hook-Form

$ npm install react-hook-form
// OR
$ npm install react-hook-form 
Войдите в полноэкранный режим Выход из полноэкранного режима

React-Hook-Form — образец

import { useForm } from "react-hook-form";

const HookForm = () => {
    const { register, handleSubmit } = useForm();
    const handleRegistration = (data) => console.log(data);

    return (
      <div>
        Hook Form
    <form onSubmit={handleSubmit(handleRegistration)}>
      <div>
        <label>Email</label>
        <input type="email" name="email" {..register('email')} />
       </div>
       <div>
          <label>Password</label>
          <input type="password" name="pass" {..register('pass')} />
        </div>
        <button>Submit</button>
    </form>
      </div>
    );
};
Вход в полноэкранный режим Выход из полноэкранного режима

Метод handleSubmit обрабатывает отправку формы, а метод register помогает зарегистрировать поле ввода в React Hook Form, чтобы оно было доступно для валидации, а его значение можно было отслеживать на предмет изменений.
Это базовая форма. Теперь давайте рассмотрим, как можно валидировать формы с помощью react-hook-form:


Валидация формы в React-Hook-Form

React Hook Form использует для валидации форм встроенную HTML-валидацию. Для валидации формы вы передаете правила валидации в метод register.

Правилами валидации являются:

Вот пример валидации форм в React-hook-form:

export default function App() {    
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {..register("firstName", { required: true, maxLength: 20 })} />
      <input {..register("lastName" , { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {..register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы заметили, это только инициализация валидации. Нам понадобится способ показать пользователю сообщение об ошибке.

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}

      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}

      <input type="submit" />
    </form>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Для получения дополнительных ресурсов, связанных с React-hook-form, не стесняйтесь обращаться к ним:

  • ? https://react-hook-form.com/get-started#Quickstart
  • ? https://blog.logrocket.com/react-hook-form-complete-guide/

✨ React Final Form

React-Final-Form — это тонкая обертка вокруг библиотеки Final-Form. Она не имеет никаких других зависимостей, кроме Final Form, и ее размер очень мал ~= 3.3kb (минифицировано и gzipped).

Вы можете легко создавать формы с React-Final-Form, используя компонент Form and Field из React Final Form. Я покажу вам, как это сделать, через несколько мгновений.


Плюсы React-Final-Form

  • Рендеринг только измененных вводимых данных
  • Всего 3,2 кб (минимизированный и gzipped)

Минусы React-Final-Form

  • Имеет зависимость от сверстников: Final Form.
  • Много кода boilerplate.

Установите React-Final-Form

$ npm install final-form react-final-form
// OR 
$ yarn final-form react-final-form
Войти в полноэкранный режим Выйти из полноэкранного режима

Чтобы создать форму, вам нужно импортировать компонент Form и Field из react-final-form.


Исходный код примера формы

import { Form, Field } from 'react-final-form'

import React from 'react'
import { render } from 'react-dom'
import Styles from './Styles'
import { Form, Field } from 'react-final-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const onSubmit = async values => {
  await sleep(300)
  window.alert(JSON.stringify(values, 0, 2))
}

const App = () => (
  <Styles>
    <h1>React Final Form - Simple Example</h1>

    <Form
      onSubmit={onSubmit}
      initialValues={{ firstname: '', lastname :''}}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>First Name</label>
            <Field
              name="firstName"
              component="input"
              type="text"
              placeholder="First Name"
            />
          </div>
          <div>
            <label>Last Name</label>
            <Field
              name="lastName"
              component="input"
              type="text"
              placeholder="Last Name"
            />
          </div>

          <div className="buttons">
            <button type="submit" disabled={submitting || pristine}>
              Submit
            </button>
            <button
              type="button"
              onClick={form.reset}
              disabled={submitting || pristine}
            >
              Reset
            </button>
          </div>
        </form>
      )}
    />
  </Styles>
)

render(<App />, document.getElementById('root')) 
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, эта форма практически аналогична форме Formik. Для создания формы

компонент принимает 3 реквизита: initialValues, handleSubmit и render.

Это базовая форма с React Final Form без валидации. Валидация в React Final Form представлена в двух вариантах, как и в Formik

  • ? Валидация на уровне формы
  • ? Валидация на уровне поля

Поскольку схема кода валидации очень похожа на Formik, мы пока пропустим примеры. Для получения дополнительной информации, связанной с React Final Form, пожалуйста, зайдите на сайт:

  • ? https://final-form.org/docs/react-final-form/api
  • ? https://blog.logrocket.com/build-high-performance-forms-using-react-final-form/

✨ Итак, какую из них выбрать?

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

После всех этих сравнений, если я начну любой проект прямо сейчас, я выберу React-Hook-Form, потому что у нее нет зависимостей и меньше шаблонного кода по сравнению с React-Final-Form и Formik.

Formik и React-Final-Form делают формы сложными, в то время как React-Hook-Form выглядит чище и интуитивно понятнее на первый взгляд. Кроме того, валидация, обеспечиваемая React-Hook-Form, использует меньше кода для завершения работы.

В конце концов, не стесняйтесь выбирать Formik или React-Final-Form для своего проекта. Это полностью зависит от ваших личных предпочтений.


Извините за эту очень длинную статью. Для тех, кто все еще здесь, в следующем разделе представлены несколько продуктов React, которые используют готовые к производству React Forms.


✨ React Berry (использует Formik)

Berry — это креативная React Dashboard, построенная с использованием Material-UI. Она призвана стать лучшим пользовательским интерфейсом с высоко настраиваемыми страницами, обогащенными функциями. Это полный геймчейнджер React Dashboard с простым и интуитивно понятным отзывчивым дизайном на экранах retina или ноутбуках.

  • ? React Node JS Berry — страница продукта
  • ? React Node JS Berry — LIVE Demo

Продукт поставляется с простым потоком аутентификации JWT: login / register / logout с открытым исходным кодом Node JS API Backend через библиотеку Passport.



✨ React Datta Able — (использует Formik)

Datta Able — это React Dashboard с открытым исходным кодом, который обеспечивает красочный и современный дизайн. Datta Able React Free — самый стилизованный React Free шаблон админки, обойдя все остальные шаблоны админки на рынке.

  • ? React Node Datta Able — страница продукта
  • ? React Node Datta Able — LIVE Demo

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *