Что такое props и как их использовать?react-6

Определение props

Props — это входные данные, которые компонент получает от родительского компонента. Они являются основным механизмом передачи информации между компонентами в React.

Ключевые характеристики props:

  1. Однонаправленный поток данных (от родителя к потомку)
  2. Неизменяемы (immutable) — компонент не должен изменять свои props
  3. Могут быть любого типа:
    • Примитивы (строки, числа)
    • Объекты, массивы
    • Функции (колбэки)
    • Другие React-элементы

Основные способы передачи props

1. Явная передача каждого свойства

<UserProfile
  name="Алексей"
  age={30}
  isVerified={true}
/>

2. Передача через spread-оператор

const userData = {
  name: "Мария",
  posts: 42,
  avatar: "maria.jpg"
};

<UserProfile {...userData} />

Работа с props внутри компонента

Функциональный компонент:

function Welcome(props) {
  return <h1>Привет, {props.name}!</h1>;
}
// С деструктуризацией:
function Welcome({ name, age }) {
  return <h1>Привет, {name}! Тебе {age} лет.</h1>;
}

Классовый компонент:

class Welcome extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}!</h1>;
  }
}

Особые виды props

1. Дочерние элементы

<Container>
  <Header />
  <Content />
</Container>

// В компоненте Container:
function Container({ children }) {
  return <div className="container">{children}</div>;
}

2. Передача функций

function Parent() {
  const handleClick = () => console.log('Клик!');

  return <Child onClick={handleClick} />;
}

function Child({ onClick }) {
  return <button onClick={onClick}>Нажми меня</button>;
}

Валидация props

С PropTypes :

import PropTypes from 'prop-types';

function User({ name, age }) {
  // ...
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  onLogin: PropTypes.func
};

С TypeScript :

interface UserProps {
  name: string;
  age?: number;  // Необязательное свойство
  onLogin: () => void;
}

const User: React.FC<UserProps> = ({ name, age, onLogin }) => {
  // ...
};

Важные правила работы с props

  1. Не изменяйте props:

    • Это приведет к непредсказуемому поведению
    • Используйте state для изменяемых данных
  2. Используйте defaultProps для значений по умолчанию:

    function Welcome({ name = 'Гость' }) {
      return <h1>Привет, {name}!</h1>;
    }
    // Или:
    Welcome.defaultProps = {
      name: 'Гость'
    };
    
  3. Избегайте избыточного пробрасывания props (prop drilling):

    • Для глубокой передачи используйте Context API или state-менеджеры

Резюмируем

  1. Props — это:

    • Аргументы компонента
    • Основной способ коммуникации между компонентами
    • Неизменяемые данные
  2. Основные случаи использования:

    • Передача данных
    • Передача колбэков
    • Передача дочерних элементов (children)
  3. Обязательные практики:

    • Валидация типов (PropTypes/TypeScript)
    • Значения по умолчанию
    • Четкая документация ожидаемых props
  4. Антипаттерны:

    • Мутация props
    • Чрезмерное пробрасывание через много уровней
    • Передача слишком сложных объектов

Совет: Для сложных приложений комбинируйте props с другими механизмами React (context, state management) для оптимальной архитектуры.