질문
클래스와 함수의 상태 간에 차이가 있습니까? 다음 두 코드에서 클릭 이벤트가 1초 내에 5번 발생하면 어떻게 될까요?
클래스 구성 요소
class HooksDemoRule extends React.PureComponent {
state = {
count: 0
}
increment = () => {
console.log('---setState---')
setTimeout(() => {
this.setState({
count: this.state.count + 1
})
}, 3000)
}
render() {
return <div>
<div className={
`${
classPrefix}-title`}>---useState && setState---</div>
<div className={
`${
classPrefix}-text`}>setState 当前值：{
this.state.count}</div>
<button onClick={
this.increment}>+1</button>
<IKWebviewRouterLink
ikTo='home'
className={
`${
classPrefix}-to-home`}
><p>返回</p></IKWebviewRouterLink>
</div>
}
}
기능 구성요소
const SecondDemo = memo(() => {
const [count, setCount] = useState(0)
const increment = () => {
console.log('---useState---')
setTimeout(() => {
setCount(count + 1)
}, 3000)
}
return <div>
<div className={
`${
classPrefix}-title`}>---useState && setState---</div>
<div className={
`${
classPrefix}-text`}>useState 当前值：{
count}</div>
<button onClick={
increment}>+1</button>
<IKWebviewRouterLink
ikTo='rule'
className={
`${
classPrefix}-to-home`}
><p>返回</p></IKWebviewRouterLink>
</div>
})
최종 결과
클래스 구성 요소에서 페이지의 숫자는 0에서 5까지 순차적으로 증가하고
함수 구성 요소에서 페이지의 숫자는 0에서 1까지만 증가합니다.
이유
클래스 컴포넌트에서는 this.state를 통해 카운트를 참조하고, setTimeout이 설정될 때마다 마지막 최근 카운트를 참조로 얻을 수 있으므로 최종적으로 5에 더해진다. 그런데 함수 컴포넌트에서 갱신할 때마다 현재 함수를 재실행하는 것이고 1초 이내에 setTimeout에서 읽은 카운트는 사실 초기값이 0이므로 결국 1만 더해진다.
간단히 말해서 클래스 컴포넌트의 상태는 이전 상태에 의존하고 함수 컴포넌트의 상태는 현재 함수를 다시 실행하는 것입니다.