Функциональные компоненты и props
Создавайте компоненты в виде функций, принимайте и деструктурируйте props, используйте PropTypes или типы TypeScript для документирования ожидаемой структуры данных.
«Функциональные компоненты и props» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое компонент React?
Компонент React — это функция JavaScript, возвращающая JSX. Компоненты — строительные блоки приложений React: повторно используемые и комбинируемые части пользовательского интерфейса.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Свойства — передача данных вниз
Свойства — это способ передать данные от родительского компонента дочернему. Компонент получает их первым аргументом в виде обычного объекта.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />Интерфейс TypeScript для свойств
Определите именованный интерфейс для свойств, чтобы получить автодополнение, проверку типов и документацию.
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'ghost';
}
function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{label}
</button>
);
}Свойство children
Свойство children содержит содержимое между открывающим и закрывающим тегами компонента. Укажите для него тип React.ReactNode, чтобы принимать любое отображаемое содержимое.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
// Usage:
<Card title="Hello">
<p>Card content goes here.</p>
</Card>Значения свойств по умолчанию с деструктуризацией
Задавайте значения по умолчанию непосредственно в шаблоне деструктуризации. Это современный подход: устаревший API defaultProps больше не рекомендуется.
function Alert({ type = 'info', message, onClose }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
<span>{message}</span>
<button onClick={onClose}>×</button>
</div>
);
}Комбинирование компонентов
Компоненты комбинируются: страница использует макет, который использует навигацию и боковую панель, а те, в свою очередь, используют более мелкие элементы, такие как кнопка и значок. Это дерево компонентов React.
Соглашения об именовании
Имена компонентов должны начинаться с заглавной буквы. Имена со строчной буквы интерпретируются как HTML-элементы. <div> — это элемент HTML div, а <Div> — компонент React с именем Div.
Чистые компоненты
Компонент является чистым, если одинаковые свойства всегда дают одинаковый результат и во время отображения не происходят побочные эффекты. Чистые компоненты проще анализировать и оптимизировать.
// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;
// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
return <p>{id}</p>;
};Передача функций как свойств
Функции (обратные вызовы) передаются как свойства, чтобы дочерние компоненты могли обмениваться данными с родительскими. Родительский компонент определяет функцию, а дочерний вызывает её.
function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
return (
<li>
{text}
<button onClick={onDelete}>Delete</button>
</li>
);
}Расширение свойств
Оператор расширения передаёт компоненту все свойства из объекта. Это полезно для обёрточных и транзитных компонентов, но используйте его осторожно: могут передаваться неожиданные свойства.
function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
return <input {...props} className={`input-base ${props.className || ''}`} />;
}Фрагменты и ключи в контексте свойств
При отображении списка компонентов как дочерних элементов каждому из них необходимо уникальное свойство key. Ключи помогают React определить, какие элементы изменились, были добавлены или удалены.
Быстрая проверка
Как задать значение свойства по умолчанию в современном функциональном компоненте React?
Итоги: компоненты и свойства
Функциональные компоненты — это функции JavaScript, возвращающие JSX. Свойства передают данные от родительского компонента дочернему. Используйте интерфейсы TypeScript для типов свойств. children: React.ReactNode — для содержимого слота. Значения по умолчанию задавайте при деструктуризации. Передавайте функции обратного вызова как свойства для связи дочернего компонента с родительским. Имена компонентов начинаются с заглавных букв.
Часто задаваемые вопросы
Урок «Функциональные компоненты и props» бесплатный?
Да — полный текст урока «Функциональные компоненты и props» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функциональные компоненты и props»?
Создавайте компоненты в виде функций, принимайте и деструктурируйте props, используйте PropTypes или типы TypeScript для документирования ожидаемой структуры данных. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Функциональные компоненты и props»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- JSX: синтаксис и транспиляция
- Функциональные компоненты и props
- Хук useState: состояние и повторные рендеры
- Списки, ключи и условный рендеринг