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

Question

В классовых компонентах состояние хранится в this.state и изменяется через this.setState().В функциональных (с хуками) состояние создается через useState() и обновляется вызовом функции-сеттера.

YeaHub · Accepted Answer

1. Классовые компонентыСостояние инициализируется в конструкторе:class Counter extends React.Component {
  	constructor(props) {
    		super(props);
    		this.state = { count: 0 };
  	}
}Для обновления используется this.setState():increment = () => {
  	this.setState({ count: this.state.count + 1 });
};setState может принимать функцию для зависимых обновлений:this.setState((prevState) => ({ count: prevState.count + 1 }));2. Функциональные компоненты (с хуками)Состояние объявляется через useState:import { useState } from 'react';

function Counter() {
  	const [count, setCount] = useState(0);
}Обновление происходит вызовом функции-сеттера (setCount):const increment = () => {
  	setCount(count + 1);
};Для сложных обновлений можно передать функцию:setCount(prevCount => prevCount + 1);