Рубрики
Без рубрики

Крючковая форма

Легкая форма форма, построенная с крючками. Tagged с помощью JavaScript, React, TypeScript, Forms.

Короткое введение, эй, меня зовут Jovi, я являюсь веб-и мобильным инженером в бельгийской компании, и это мой первый Dev.to Post, в свете предстоящего релиза React-Hooks, я решил дать ему шанс.

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

Вот почему я почувствовал необходимость сделать две библиотеки Один пояс для инструментов с крючками и Форма библиотека Анкет

Библиотека форм будет единственной, о которой говорили в этом посте, она следует за Форма / Поле метод Этот метод используется популярными библиотеками, такими как Redux-Form Анкет

Я вполне доволен результатом, так как в итоге он стал мини -пакетом GZIPD 2,8 КБ, это значительно меньше, чем другие популярные варианты.

Крючки

Библиотека раскрывает набор крючков:

  • Usefield
  • Использовать
  • USELIFERARRY

Эти крючки могут использоваться в ваших компонентах для построения компонентов, они автоматически принесут методы, значения и мета -информацию при прохождении FieldId Анкет

Компоненты

Библиотека также раскрывает набор компонентов, можно спросить, почему был сделан этот выбор, когда у нас уже есть крючки, чтобы сделать их сами.

Что ж, с компонентами, которые я решил сделать более оптимизированную версию, они запоминают компонент, который им приходится отображать, и пересматривать только при изменениях их значения, ошибки, …

Итак, для каждого крючка есть компонент:

  • Поле
  • Ошибка
  • Fieldarray

Но есть еще один, и это Форма составная часть. Я решил сохранить контейнер в качестве HOC, так как в нем используется много крючков для преобразования реформирования, …

Пример

Я сделал небольшой пример в коде и ящике основной рабочей формы: https://codesandbox.io/s/k8mylo9lo

Этот пример демонстрирует базовое использование поля и полевогоррея. Забавная вещь о крючках заключается в том, что когда вы хотите переопределить существующее Поле Реализация вы можете сделать это, просто захватив Usefield Анкет Он вернет значения/методы для поля, которое вы проходите И вы можете реализовать это самостоятельно.

Заключение

Я использую Крюк-форма активно в одном из моих боковые проекты И я очень рад, как это получится.

Вы всегда можете прочитать больше в документации

Я надеюсь, что вам понравился пост, и отзывы об этом всегда приветствуются!

Если вы хотите узнать больше о формах и обоснованиях моего выбора, вы можете прочитать больше здесь:

Полевой метод Выбор подключений

Оригинал: “https://dev.to/jovidecroock/hooked-form-1625”