Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Состояние форм - отдельная тема для обсуждения. По умолчанию, все что мы вводим в формах, хранится внутри DOM, что немного противоречит предыдущим рассуждениям о состоянии приложения. С другой стороны, если данные нам нужны только во время сабмита формы, то такой подход вполне допустим. В этом уроке мы разберем существующие подходы в работе с формами.</p>

2 <p>Выделяют два подхода к обработке состояния формы. Один из них отдает контроль состояния самой форме, другой предполагает его хранение в пользовательском приложении. Оба подхода имеют свои плюсы и минусы, которые обязательно надо знать при выборе того или иного решения. В документации React такие подходы называют контролируемыми и неконтролируемыми формами. Эти названия довольно точно описывают происходящее, поэтому здесь мы будем использовать ту же терминологию.</p>

3 <h2>Неконтролируемые формы</h2>

4 <p>Неконтролируемые формы - это подход, при котором состояние формы хранится внутри самой формы и извлекается только при её отправке. Это привычный способ работы с формами вне фреймворков:</p>

5 <p>К достоинствам этого способа относят:</p>

6 <ul><li>Простоту. Мало кода, не нужно хранить состояние.</li>

7 <li>Скорость. Браузер делает всю работу сам. Минимум вмешательства со стороны пользовательского кода.</li>

8 </ul><p>Несмотря на легкость и очевидность, этот подход обладает одним недостатком. При таком подходе невозможно реагировать на изменения формы в процессе ее заполнения. Где это может быть нужно? Вот несколько примеров:</p>

9 <ul><li>Автодополнение. Выпадающие списки зависят от того, что было набрано.</li>

10 <li>Валидация в процессе набора. Часто реализуется в виде красной рамки вокруг поля для ввода.</li>

11 <li>Моментальная фильтрация. Такое часто используется на сервисах бронирования или поиска товаров. Достаточно выбрать какой-то пункт меню, как сразу же меняется выборка.</li>

12 </ul><p>В такой ситуации нам понадобятся контролируемые формы.</p>

13 <h2>Контролируемые формы</h2>

14 <p>Контролируемые формы предполагают хранение состояния всех элементов формы в приложении. Любое изменение в форме отслеживается, анализируется и отражается в состоянии приложения, что позволяет мгновенно реагировать на действия пользователя.</p>

15 <p>Для реализации такого поведения нам понадобится добавить в состояние структуру отражающую форму. Сделаем это для формы регистрации включающей в себя имя, email и пароль.</p>

16 <p>Теперь посмотрим на весь код целиком</p>

17 <p><a>Попрактиковаться</a></p>

18 <p>Преимущества такого подхода:</p>

19 <ul><li>Возможность мгновенной реакции на любые изменения формы.</li>

20 <li>Удобная реализация динамических интерфейсов (валидация, автодополнение, фильтрация).</li>

21 </ul><p>И недостатки:</p>

22 <ul><li>Больше кода и более сложная реализация.</li>

23 <li>Меньшая производительность из-за постоянного мониторинга состояния. Актуальность этого недостатка зависит от сложности формы и производительности приложения.</li>

24 </ul><p>В популярных фреймворках (React, Vue, Angular) для реализации контролируемых форм существуют готовые инструменты (например, React Hook Form для React, Vuelidate для Vue, Reactive Forms для Angular). Они значительно упрощают работу с контролируемыми формами, предоставляя удобные API для валидации, управления состоянием и обработки событий.</p>

25 <h2>Что использовать?</h2>

26 <p>В чистом JS предпочтительнее неконтролируемые формы. Так намного проще и быстрее. И только в том случае, когда нужна мгновенная реакция, можно вводить контроль данных формы. Причем необязательно переходить от одного способа к другому целиком. Можно использовать гибрид, вводить контроль только тех данных, где без этого никак.</p>