Совет: в функциональных компонентах часто используют параметры по умолчанию через деструктуризацию:

function Header({ title = 'The App Name' }) {
  return (
    

      
{title}
    
  );
}

Это предпочтительный и современный стиль для большинства случаев. defaultProps остаётся применим для классовых компонентов и некоторого совместимого кода, но параметры по умолчанию даю тот же эффект и проще читаться.

Проверка типов с PropTypes и альтернативы

PropTypes — это библиотека для рантайм-проверки типов пропсов. Она помогает ловить ошибки, когда компонент получает неожидаемый тип.

Пример использования PropTypes

import PropTypes from 'prop-types';

function Header({ title }) {
  return (
    

      
{title}
    
  );
}

Header.defaultProps = {
  title: 'The App Name'
};

Header.propTypes = {
  title: PropTypes.string
};

export default Header;

Альтернатива для более строгой проверки — TypeScript. TypeScript выполняет проверку типов на этапе компиляции и даёт более сильную гарантию корректности API компонентов. Если ваш проект на TypeScript, PropTypes часто избыточны.

Повторное использование компонентов через props

Props делают компонент универсальным. Создадим компонент Task и будем рендерить несколько задач, просто меняя проп name.

Task.js

import PropTypes from 'prop-types';

function Task({ name }) {
  return (
    

      
{name}
    
  );
}

Task.defaultProps = {
  name: 'Task Name'
};

Task.propTypes = {
  name: PropTypes.string
};

export default Task;

App.js: несколько экземпляров

import Header from './components/Header';
import Task from './components/Task';

function App() {
  return (
    

      

      
      
      
    
  );
}

export default App;

Так вы создаёте одну повторно используемую компоненту Task и настраиваете её разными props.

Когда props не подходят: ограничения и альтернативы

• Пробрасывание через много уровней («prop drilling»). Если вам приходится передавать одно и то же значение через несколько промежуточных компонентов, стоит рассмотреть Context API или глобальное хранилище состояния (Redux, Zustand).
• Сложные зависимости между состояниями. Если дочерние компоненты должны синхронно изменять одно и то же состояние, лучше управлять состоянием в родителе или централизованно.
• Частая передача функций-колбэков по дереву. Иногда легче поднять состояние выше или использовать мемоизацию (useCallback) и Context.

Альтернативы и когда их применять:

• Context API — для настроек, темы, локали, текущего пользователя и т.п.; подходит, если данные нужны многим компонентам на разных уровнях.
• Redux / Zustand / MobX — для сложной логики приложения и согласованного управления состоянием, когда требуется предсказуемый поток данных и время жизни состояния не связано с UI-деревом.
• Hooks и local state — когда состояние специфично для одного компонента.

Практические приёмы и эвристики

• Деструктурируйте props в сигнатуре функции: function MyComp({ a, b }) — короче и проще тестировать.
• Используйте PropTypes или TypeScript для контрактов API компонентов.
• Не модифицируйте объекты из props напрямую; клонируйте перед изменением.
• Мемоизируйте callback-функции (useCallback) и вычисления (useMemo) при необходимости, чтобы избежать лишних перерисовок.
• Разбивайте большие компоненты: если компонент принимает >5 props, подумайте о рефакторинге.

Тесты: проверки props в компонентных тестах

Ниже пример простого теста с React Testing Library, который проверяет рендеринг заголовка на основе пропса.

// Header.test.js
import { render, screen } from '@testing-library/react';
import Header from './Header';

test('Header отображает title из props', () => {
  render(
);
  expect(screen.getByText('Task Tracker')).toBeInTheDocument();
});

test('Header использует defaultProps если проп не передан', () => {
  render(
);
  expect(screen.getByText('The App Name')).toBeInTheDocument();
});

Критерии приёмки:

• Компонент рендерит текст, соответствующий переданному prop.
• При отсутствии prop отображается значение по умолчанию.
• Prop с неправильным типом должен приводить к предупреждению (PropTypes) или ошибке компиляции (TypeScript).

Роль-ориентированные чеклисты

Для разработчика:

• Деструктурируйте props.
• Добавьте defaultProps или параметры по умолчанию.
• Определите propTypes или TypeScript-тип.
• Избегайте побочных эффектов с props.

Для ревьювера кода:

• Проверить, не модифицируются ли объекты из props.
• Убедиться, что компонент не принимает слишком много пропсов.
• Проверить наличие тестов для ключевых props.

Миграция и совместимость

• Если проект переводится на TypeScript, начните с добавления типов для публичных компонентов: interface Props { title?: string }.
• Для функций используйте параметры по умолчанию вместо defaultProps. Для классовых компонентов defaultProps остаётся поддерживаемым.
• При замене PropTypes на TypeScript можно постепенно убирать PropTypes по мере типизации модулей.

Примеры ошибок и как их устранить

1. Пустой заголовок после удаления атрибута title — решается defaultProps или параметром по умолчанию.
2. Непредсказуемое поведение при передаче мутабельных объектов — клонируйте объекты перед изменением или используйте неизменяемые структуры.
3. Лаги и лишние рендеры — мемоизируйте функции и значения, проверьте ключи в списках.

Глоссарий (в одну строку)

• props — входные данные компонента, передаются от родителя к дочернему.
• defaultProps — значения по умолчанию для пропсов компонента.
• PropTypes — рантайм-проверка типов пропсов.
• Context API — механизм глобального контекста для передачи данных вниз по дереву без проброса через пропсы.

Краткое резюме

• Props — основной способ конфигурирования компонентов и передачи данных сверху вниз.
• Для значений по умолчанию используйте параметры по умолчанию или defaultProps для классов.
• Для проверки типов выбирайте PropTypes или TypeScript; TypeScript даёт более строгие гарантии на этапе сборки.
• Если вы сталкиваетесь с «prop drilling», рассмотрите Context API или состояние на уровне приложения.

Важно: всегда проектируйте публичный API компонента (набор props) так, чтобы он был простым, предсказуемым и документированным.

Подсказка: начните с небольших компонентов и растите архитектуру вместе с приложением — props отлично подходят для простых и средних случаев, а Context/Redux — для более сложных.