Будування форм у React: Керовані та некеровані компоненти

Форми є важливою частиною веб-додатків, дозволяючи користувачам вводити дані. У React керування елементами форми можна здійснити через керовані або некеровані компоненти, кожен з яких має свої особливості та сценарії використання.

Що таке керовані компоненти?

Керований компонент — це елемент форми, значення якого контролюється станом компонента. React компонент керує даними форми через стан, забезпечуючи єдине джерело правди.

Основні характеристики:

1. Керування через стан React: Значення вводу прив'язане до стану компонента.
2. Оновлення в реальному часі: Зміни в полі вводу негайно оновлюють стан і навпаки.
3. Повний контроль: Дозволяє валідацію та трансформації значення вводу під час введення користувачем.

Як працюють керовані компоненти:

• Використовуйте value для прив'язки поля вводу до змінної стану.
• Використовуйте onChange для оновлення стану щоразу, коли значення вводу змінюється.

Приклад: Кероване поле вводу

import React, { useState } from 'react';  

function ControlledForm() {  
 const [inputValue, setInputValue] = useState("");  
 const handleChange = (event) => {  
 setInputValue(event.target.value);  
 };  
 const handleSubmit = (event) => {  
 event.preventDefault();  
 alert(`Submitted Value: ${inputValue}`);  
 };  
 return (  


 Name:  


 Submit  

 );  
}

Переваги:

1. Спрощує логіку валідації, оскільки значення вводу завжди доступне через стан.
2. Дозволяє здійснювати трансформації, такі як форматування або обмеження вводу.

Недоліки:

1. Потребує більше коду в порівнянні з некерованими компонентами.
2. Може викликати проблеми з продуктивністю в дуже великих формах через часті оновлення стану.

Що таке некеровані компоненти?

Некерований компонент — це елемент форми, де значення вводу контролюється безпосередньо DOM. Компонент не керує даними форми через стан, але ви можете отримати значення через ref.

Основні характеристики:

1. Контроль через DOM: Значення елемента форми знаходиться в DOM, а не в стані React.
2. Refs для доступу: Використовуйте React.createRef або useRef для читання чи маніпулювання значенням вводу.
3. Менше коду: Простіша реалізація для базових форм.

Як працюють некеровані компоненти:

• Використовуйте defaultValue для встановлення початкового значення.
• Доступ до значення можна отримати через ref, коли це необхідно.

Приклад: Некероване поле вводу

import React, { useRef } from 'react';  

function UncontrolledForm() {  
 const inputRef = useRef();  
 const handleSubmit = (event) => {  
 event.preventDefault();  
 alert(`Submitted Value: ${inputRef.current.value}`);  
 };  
 return (  

    Name:            Submit    
    );  
}  

Переваги:

1. Менше коду в порівнянні з керованими компонентами.
2. Підходить для простих форм, де валідація не є необхідною.

Недоліки:

1. Складніше валідувати дані вводу динамічно.
2. Обмежений контроль над значенням вводу в порівнянні з керованими компонентами.

Коли використовувати який варіант?

Використовуйте керовані компоненти:
- Коли потрібна валідація, трансформація або динамічна поведінка вводу.
- Для складних форм з кількома полями вводу.
- Коли потрібен зворотний зв'язок в реальному часі (наприклад, валідація форми або лічильники символів).

Використовуйте некеровані компоненти:
- Для простих форм або статичних ввідних даних.
- Коли працюєте з сторонніми бібліотеками, які безпосередньо взаємодіють з DOM.
- Для форм, де не бажано навантаження на управління станом, щоб уникнути проблем з продуктивністю.

Комбінування керованих і некерованих компонентів

В деяких випадках ви можете поєднувати обидва підходи.
Наприклад, ви можете використовувати некероване поле вводу для мінімальної налаштування і керовану логіку для специфічних полів.

Приклад: Комбінування обох підходів

import React, { useState, useRef } from 'react';  

function MixedForm() {  
 const uncontrolledRef = useRef();  
 const [controlledValue, setControlledValue] = useState("");  

 const handleSubmit = (event) => {  
 event.preventDefault();  
 const uncontrolledValue = uncontrolledRef.current.value;  
 alert(`Controlled: ${controlledValue}, Uncontrolled: ${uncontrolledValue}`);  
 };  

 return (  


 Controlled Input:  
  setControlledValue(e.target.value)}  
 />  


 Uncontrolled Input:  


 Submit  

 );  
}

Кращі практики для створення форм у React

1. Вибір правильного підходу: Використовуйте керовані компоненти для складних форм, а некеровані — для простих.
2. Валідація: Використовуйте керовані компоненти для вбудованої валідації та бібліотеки, такі як Yup або Formik, для більших проєктів.
3. Оптимізація продуктивності: Для великих форм використовуйте дебаунс (debounce) або тротлінг (throttle) змін вводу в керованих компонентах.
4. Доступність: Завжди додавайте мітки та атрибути ARIA для кращої доступності.

Висновок

Розуміння керованих і некерованих компонентів є важливим для створення ефективних і підтримуваних форм у React. Керовані компоненти надають більше гнучкості та контролю, тоді як некеровані компоненти є простішими та більш продуктивними для базових випадків. Вибір правильного підходу залежить від складності вашого додатка та вимог.

Перекладено з: Building Forms in React: Controlled vs. Uncontrolled Components