Освоение компонентов React: контролируемые и неконтролируемые

Узнайте, как использовать контролируемые и неконтролируемые компоненты для улучшения приложений React.

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

Понимание контролируемых компонентов

Управляемые компоненты рекомендуются документацией React из-за их предсказуемости и простоты управления. В контролируемом компоненте данные формы управляются компонентом React, а состояние компонента служит «единым источником истины» для входных данных, отображаемых компонентом.

Чтобы создать контролируемый компонент, вы обычно используете тег <input> для захвата пользовательского ввода и обработчик событий onChange для обработки изменений значения ввода. Всякий раз, когда пользователь вносит изменения, запускается обработчик событий onChange, соответствующим образом обновляющий состояние компонента.

Вот пример контролируемого компонента в React:

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleInputChange = (event) => {
    this.setState({ inputValue: event.target.value });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.handleInputChange}
      />
    );
  }
}

В этом примере переменная состояния inputValue используется для хранения значения поля ввода. Функция handleInputChange запускается всякий раз, когда пользователь вводит ввод, обновляя состояние inputValue.

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

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