Управляемые и неуправляемые компоненты в React: Что, как и когда использовать?

Если вы погрузились в мир React, то наверняка уже столкнулись с формами. А где формы, там и вопрос: как правильно управлять данными, которые вводит пользователь? Сегодня мы поговорим про управляемые и неуправляемые компоненты — два подхода, которые предлагает React, и выясним, какой из них и в какой ситуации станет вашим лучшим другом.

Что такое управляемые компоненты и почему React их так любит?#

В большинстве случаев, когда вы будете создавать формы, вы будете использовать именно этот подход. Идея до гениальности проста: сам React становится единственным «хозяином» данных в форме.

Представьте, что ваше поле для ввода (input) — это марионетка. Все, что в ней отображается, контролируется состоянием (state) вашего компонента. Пользователь вводит символ, срабатывает функция-обработчик (onChange), она обновляет состояние, и уже это обновленное состояние передается обратно в input в качестве его значения (value).

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

Например, хотите, чтобы все вводимые буквы мгновенно становились заглавными? Проще простого! Взгляните на код:


TypeScript
1handleChange(event) {
2  // Мы полностью контролируем, что попадет в состояние
3  setInputValue({value: event.target.value.toUpperCase()});
4}

А что насчет неуправляемого подхода?#

Неуправляемый компонент react — это, по сути, возвращение к корням, к классическому HTML. В этом случае поле input живет своей жизнью и само хранит свое состояние прямо в DOM.

«Но как же тогда получить из него данные?» — спросите вы. А вот для этого в React есть специальные «щупы» — рефы (refs). Вы как бы прикрепляете к элементу ref и, когда вам нужно (например, при отправке формы), просто обращаетесь к нему и забираете актуальное значение.

Этот метод требует меньше кода, так как вам не нужно писать обработчик на каждое изменение. Вы просто ждете нужного момента и берете то, что вам нужно.

Вот как это выглядит на практике:


TypeScript
1class NameForm extends React.Component {
2
3  constructor(props) {
4    super(props);
5    this.handleSubmit = this.handleSubmit.bind(this);
6    this.input = React.createRef(); // Создаем реф
7  }
8
9  handleSubmit(event) {
10    // При отправке формы берем значение прямо из DOM через реф
11    alert('Отправленное имя: ' + this.input.current.value);
12    event.preventDefault();
13  }
14
15  render() {
16   return (
17     <form onSubmit={this.handleSubmit}>
18       <label>
19       Имя:
20       {/* Привязываем реф к нашему инпуту */}
21       <input type="text" ref={this.input} /> 
22       </label>
23     <input type="submit" value="Отправить" />
24    </form>
25    );
26   }
27}

Вердикт: Когда и что выбирать?#

Итак, главный вопрос: какой путь выбрать? Официальная документация и многолетний опыт разработки кричат в один голос: в большинстве случаев используйте управляемые компоненты. Это надежно, предсказуемо и соответствует декларативной природе React.

Однако неуправляемый подход — это не зло. Он может быть чертовски удобен в некоторых ситуациях. Например, если вам нужно интегрировать React с какой-то старой jQuery-библиотекой или когда вы работаете с полями, которые сложно контролировать, вроде загрузки файлов (<input type="file" />).

Заключение#

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

Не бойтесь экспериментировать! Попробуйте создать одну и ту же форму обоими способами. Так вы лучше прочувствуете разницу и в нужный момент всегда сможете сделать правильный и осознанный

Что такое управляемые компоненты и почему React их так любит?#

А что насчет неуправляемого подхода?#

Вердикт: Когда и что выбирать?#

Заключение#

Авторы файла