У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Контролируемые и неконтролируемые компоненты в React 

Фото Nik Shuliahin на Unsplash
Фото Nik Shuliahin на Unsplash

React - это библиотека JavaScript для создания пользовательских интерфейсов. Если вы нажали, чтобы прочитать этот пост, вы, возможно, уже знаете, что React это все о компонентах. 

React поддерживает два типа компонентов: контролируемые и неуправляемые компоненты. React Docs заявляют:

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

Давайте посмотрим на каждого.

Контролируемые компоненты

В контролируемом компоненте данные формы обрабатываются состоянием внутри компонента. Состояние внутри компонента служит «единственным источником правды» для элементов ввода, которые отображаются компонентом.

Давайте посмотрим на пример кода.

import React, { Component } from 'react';

class App extends Component {
    state = {
        message: ''
    }
    updateMessage = (newText) => {
        console.log(newText);
        this.setState(() => ({
            message: newText
        }));
    }
    render() {
        return (
            <div className="App">
                <div className="container">
                    <input type="text"
                        placeholder="Your message here.."
                        value={this.state.message}
                        onChange={(event) => this.updateMessage(event.target.value)}
                    />
                    <p>the message is: {this.state.message}</p>
                </div>
            </div>
        );
    }
}

export default App;

Здесь у нас есть простой компонент, который отображает одно текстовое поле на странице и выводит обратно все, что пользователь вводит в текстовое поле. Здесь это используется:

Контролируемый компонент в действии!
Контролируемый компонент в действии!

Если мы посмотрим на код для этого компонента, в строке 4 мы создаем объект состояния. Он содержит единственное свойство, которое называется message. Здесь хранится значение, введенное в текстовое поле.

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

Если вы посмотрите на строки 19 и 20 кода, вы увидите, что:

  1. Текстовое поле имеет атрибут value, связанный со свойством сообщения в состоянии.
  2. У нас есть обработчик события onChange.

Эти 2 пункта говорят вам, что это контролируемый компонент.

Нам не нужен элемент формы на странице, чтобы компонент был контролируемым компонентом.

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

Обработчик вызывает setState(), как вы можете видеть в строке 9 выше. Это обновляет состояние внутри компонента.

Вы никогда не должны устанавливать состояние прямо так:

this.state.message = 'dont update state like this';

Обновление состояния таким способом не вызовет повторную визуализацию компонента, а сделанные пользователем изменения не будут отображаться в пользовательском интерфейсе.

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

Поток данных является однонаправленным от состояния компонента к элементу ввода.

Работа с контролируемыми компонентами может быть немного громоздкой. Если на странице имеется большое количество элементов ввода, каждый элемент требует настройки с атрибутом значения и обработчиком события.

Неконтролируемые компоненты

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

Что такое ref из документации React :

Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга.

Давайте посмотрим на пример кода.

Если мы изменим контролируемый компонент, с которым мы работали выше, чтобы он стал неуправляемым компонентом, вот что мы получаем:

import React, { Component } from 'react';

class App2 extends Component {
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.input = React.createRef();
    }
    
    handleChange = (newText) => {
        console.log(newText);
    }
    render() {
        return (
            <div className="App2">
                <div className="container">
                    <input type="text"
                        placeholder="Your message here.."
                        ref={this.input}
                        onChange={(event) => this.handleChange(event.target.value)}
                    />
                </div>
            </div>
            
        );
    }
}
export default App2;

Вы можете видеть, что мы добавили конструктор в строке 4 и в нем мы создаем обработчик событий и создаем ref в this.input.

Мы снова ссылаемся на this.input в строке 19, где мы устанавливаем его как атрибут ref для элемента input. С этими частями, каждый раз, когда мы вводим текстовое поле, значение выводится в консоли.

Наш неконтролируемый компонент в действии!
Наш неконтролируемый компонент в действии!

Несколько ключевых моментов относительно ссылок:

  1. Ссылки создаются с использованием React.createRef().
  2. Ссылки прикрепляются к элементам ввода с помощью атрибута ref соответствующего элемента.
  3. Ссылки часто используются в качестве свойств экземпляра для компонента. Ссылка устанавливается в конструкторе (как показано выше), и значение доступно во всем компоненте.
  4. Вы не можете использовать ссылки в функциональных компонентах, потому что экземпляр не создан.

Есть несколько хороших вариантов использования ссылок:

Управление фокусом, выделением текста или воспроизведением мультимедиа.

Запуск императивных анимаций.

Интеграция со сторонними библиотеками DOM.

Избегайте использования ссылок для всего, что может быть сделано декларативно.

Ключевые моменты

  1. По возможности используйте контролируемые компоненты.
  2. Контролируемые компоненты не требуют элемента формы, чтобы считаться контролируемым компонентом.
  3. Если у компонента есть входной элемент, имеющий атрибут value, связанный с состоянием, и обработчик события для обновления указанного состояния, он является контролируемым компонентом.
  4. Для страниц с большим количеством элементов ввода работа с контролируемыми компонентами может быть обременительной.
  5. Поток данных является однонаправленным в контролируемых компонентах, причем состояние внутри компонента выступает в качестве единственного источника правды.
  6. Все изменения состояния в контролируемом компоненте должны выполняться через функцию setState.
  7. Неконтролируемые компоненты хранят свои данные в DOM как традиционный элемент ввода HTML.
  8. React.createRef() используется для создания переменных экземпляра внутри неконтролируемых конструкторов компонентов. Эти переменные затем связываются с элементами ввода через атрибут ref.
  9. Ссылки не могут быть созданы и использованы на функциональных компонентах.

Источник:

#React
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоеденяйся в тусовку

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

Попробовать