Как изменяется состояние в классовых и функциональных компонентах React?

Как изменяется состояние в классовых и функциональных компонентах React?

• Управление состоянием в React
• В классовых компонентах состояние находится в this.state
• Для изменения применяется this.setState: метод асинхронный и объединяет обновления
• В функциональных компонентах состояние задаётся с помощью хука useState
• setState, возвращаемый useState, полностью перезаписывает состояние
• Каждый вызов useState обновляет состояние независимо, без автоматического объединения
• Функциональные компоненты поддерживают несколько хуков для раздельного управления состояниями
• В классовом компоненте используется один объект состояния, а в функциональном — независимые переменные
• На практике функциональные компоненты легче оптимизировать и читать

Кратко: Классовые — единый объект состояния, обновляемый через setState с объединением изменений; Функциональные — независимые состояния на основе хуков, которые обновляются отдельно и перезаписываются.

Развёрнутый ответ

Основной ответ

Подход к изменению состояния в классовых и функциональных компонентах React различается из-за особенностей их архитектуры и API. В классовом компоненте состояние хранится в объекте this.state, а для его изменения вызывается метод this.setState(). Он объединяет новые данные с текущим состоянием и выполняет частичный ререндер. В функциональных компонентах, появившихся в React 16.8 вместе с хуком useState, состояние располагается внутри замыканий. Обновление выполняется функцией-установщиком, которую возвращает хук, и полностью заменяет прежнее значение.

Основные особенности

• Механизм обновления: В классовых компонентах setState работает асинхронно, объединяет обновления и выполняет поверхностное слияние объектов (shallow merge). В функциональных компонентах setState, полученный из useState, полностью заменяет значение и использует замыкания, поэтому объекты автоматически не объединяются.
• Императивный и декларативный подходы: Классовые компоненты традиционно более императивны, поскольку изменение состояния и жизненный цикл организованы через методы. Хуки дают возможность декларативно управлять состоянием, опираясь на функциональный стиль и чистые функции.
• Использование предыдущего состояния: В функциональных компонентах обновление может происходить асинхронно, поэтому для надёжного вычисления нового значения обычно рекомендуют передавать функцию обновления в setState(prev => newValue). В классовых компонентах аналогичную задачу помогает решать callback в setState.
• Поведение и производительность: Функциональные компоненты с хуками удобнее работают с побочными эффектами — для этого используются хуки useEffect. Такой подход улучшает контроль жизненного цикла и помогает избежать характерных для классовых компонентов проблем, связанных с наследованием и this.

Практический контекст

В React 18+ функциональные компоненты с хуками стали отраслевым стандартом: их проще тестировать и рефакторить, а управление состоянием и эффектами получается более прозрачным. Классовые компоненты по-прежнему поддерживаются и используются в legacy-коде, однако для новых проектов рекомендуют функциональный подход с useState и useReducer при работе со сложным состоянием.