Навіщо і коли потрібно передавати props в super () при використанні класових компонентів?

Повне пояснення

Що це і навіщо

У React класові компоненти успадковуються від React.Component. Конструктор цього базового класу очікує отримати об’єкт пропсів, щоб зберегти його у this.props і налаштувати внутрішній стан.

Ключові принципи

• super(props) викликає конструктор батьківського класу.
• Після виклику super(props) доступ до this.props і this.state можливий.
• Якщо пропси не передати, this.props буде undefined, що порушує контракт React.

Як це працює

1. Користувач створює класовий компонент.
2. У конструкторі викликається super(props).
3. Батьківський клас зберігає пропси у this.props і ініціалізує state.
4. Компонент може використовувати пропси у методах життєвого циклу, рендері тощо.

Практика і реалізація

class MyComponent extends React.Component<{title: string}> {
  constructor(props: {title: string}) {
    super(props); // <‑‑ критично
    this.state = {count: 0};
  }
  render() {
    return <h1>{this.props.title}</h1>;
  }
}

Тестування

У Jest можна перевірити, що this.props доступний:

const wrapper = shallow(<MyComponent title="Hi" />);
expect(wrapper.instance().props.title).toBe("Hi");

Особливості в контексті React класів

• У функціональних компонентах пропси передаються як аргумент функції, тому super(props) не потрібен.
• Якщо компонент не має конструктора, React сам викликає super(props).

Оптимізація та типові помилки

• Заборонено викликати super() без аргументу, коли компонент використовує пропси.
• Якщо пропси не потрібні, можна викликати super() без аргументу, але це рідко використовується.

Диагностика

• Симптом: this.props undefined у методі render.
• Причина: пропси не передані в super().
• Дія: додати props у виклик super(props).

Альтернативи

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