ReactJS - Неуправляемый компонент

Привет,野心勃勃ые программисты! Сегодня мы окунемся в мир ReactJS и рассмотрим концепцию под названием "Неуправляемые компоненты". Не волнуйтесь, если вы новички в программировании - я проведу вас через это шаг за шагом, как я уже делал это для countless студентов на протяжении многих лет. Так что возьмите кружку вашего любимого напитка и отправляйтесь в это захватывающее путешествие вместе со мной!

Что такое неуправляемые компоненты?

Прежде чем мы углубимся в детали, давайте поймем, что такое неуправляемые компоненты в React. Представьте, что вы заполняете бумажный бланк - вы записываете свою информацию, и когда заканчиваете, вы его сдаёте. Это по сути то, как работают неуправляемые компоненты в React!

В React неуправляемый компонент - это элемент формы, который управляет своим состоянием изнутри, а не позволяет React контролировать его. Это как если бы элементу формы дали самостоятельное мышление!

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

Теперь давайте закатаем рукава и脏手 с кодом. Мы начнем с простого примера, чтобы проиллюстрировать, как работают неуправляемые компоненты в программировании форм.

Основной неуправляемый ввод

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

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Имя:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

В этом примере у нас есть простая форма с текстовым вводом для имени. Обратите внимание, что у нас нет состояния или обработчиков onChange? Потому что ввод управляет своим состоянием изнутри.

Доступ к значениям ввода

Но подождите, вы можете спросить, "Как мы получаем значение ввода, если React им не управляет?" Отличный вопрос! Мы можем использовать ref для прямого доступа к DOM-узлу. Давайте изменим наш пример:

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
alert('Было отправлено имя: ' + inputRef.current.value);
};

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Имя:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">Отправить</button>
</form>
);
}

export default SimpleForm;

В этой обновленной версии мы используем хук useRef для создания ссылки на наш ввод. Когда форма отправляется, мы можем получить значение ввода, используя inputRef.current.value.

Создание простой формы

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

Форма с несколькими вводами

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Данные формы:', formData);
// Здесь вы обычно отправляете данные на сервер
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Имя:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">Электронная почта:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Сообщение:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Отправить сообщение</button>
</form>
);
}

export default ComplexForm;

В этом примере мы создали форму с тремя полями: имя, электронная почта и сообщение. У каждого поля есть свой ref, что позволяет нам получить его значение при отправке формы.

Объяснение

1. Мы создаем ссылки для каждого ввода с помощью useRef.
2. В функции handleSubmit мы предотвращаем стандартное поведение отправки формы и собираем значения каждого ввода с помощью их ссылок.
3. Затем мы логируем данные формы в консоль (в реальном приложении вы обычно отправляете эти данные на сервер).

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

Давайте на минутку обсудим преимущества и недостатки использования неуправляемых компонентов:

Плюсы	Минусы
Проще код для базовых форм	Меньше контроля над значениями формы
Может быть полезно для интеграции React с не-React кодом	Труднее реализовать динамическую валидацию формы
Потенциально лучшая производительность для非常大的 форм	Трудно программно сбросить значения формы
Хорошо работает с файловыми вводами	Меньше "React-like" - не следует принципу единственного источника истины

Когда использовать неуправляемые компоненты

Неуправляемые компоненты могут быть полезны в определенных сценариях:

1. При интеграции с не-React кодом или библиотеками
2. Для простых форм, где не требуется реальная валидация или динамические обновления
3. При работе с файловыми вводами (которые по своей природе неуправляемые)

Однако, для большинства приложений React, управляемые компоненты (где React управляет состоянием формы) обычно предпочтительнее, так как они предоставляют больше контроля и лучше соответствуют философии React.

Заключение

И вот мы с вами,朋友们! Мы совершили путешествие по земле неуправляемых компонентов в React. Помните, как выбор между механической и автоматической коробкой передач, выбор между управляемыми и неуправляемыми компонентами зависит от ваших конкретных потребностей.

Заканчивая, я вспоминаю, как один из моих студентов однажды сказал мне: "React как готовка - иногда вам нужны точные измерения, а иногда вы можете просто угадать". Неуправляемые компоненты немного похожи на угадывание - у них есть свое место, но используйте их мудро!

Надеюсь, это руководство осветило путь неуправляемых компонентов для вас. Продолжайте практиковаться, продолжайте программировать и помните - в мире программирования каждая ошибка - это ступенька к успеху!

Счастливого кодирования, будущие мастера React!

Credits: Image by storyset