Чем отличается конструктор от метода getInitialState() в React и когда использовать каждый из них?

Question

Accepted Answer

## Методы инициализации состояния

**Инициализация состояния** отличается в зависимости от того, какой синтаксис React ты используешь. Два основных подхода — это `constructor` для ES6-классов и `getInitialState()` для устаревшего паттерна `React.createClass()`.

## ES6 Class Components (рекомендуется)

Используй метод **`constructor`** для инициализации состояния в современных приложениях React:

```javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      /* initial state */
    }
  }
}
```

Конструктор получает `props` как параметр и должен вызвать `super(props)` перед обращением к `this`. Состояние инициализируется как обычный объект, присваиваемый `this.state`.

## React.createClass() (устарело)

Старый метод **`getInitialState()`** использовался вместе с `React.createClass()`:

```javascript
const MyComponent = React.createClass({
  getInitialState() {
    return {
      /* initial state */
    }
  }
})
```

Этот метод возвращает объект с начальными значениями состояния.

## Важное замечание

**`React.createClass()` устарел и удалён начиная с React v16.** Для новых проектов следует *всегда* использовать **синтаксис ES6-классов** или **функциональные компоненты с хуками**.

Для современной разработки лучше использовать **функциональные компоненты с хуком `useState`**:

```javascript
function MyComponent() {
  const [state, setState] = useState({
    /* initial state */
  })
}
```

Этот подход более лаконичен и считается актуальной best practice в React.

Чем отличается конструктор от метода getInitialState() в React и когда использовать каждый из них?

Ответ

Методы инициализации состояния

ES6 Class Components (рекомендуется)

React.createClass() (устарело)

Важное замечание

Проверочные вопросы

Помогите улучшить этот вопрос

Обсуждение