반응 + useState () + previousState
나는 반응이 아주 새롭고 useState Hook을 이해하는 데 문제가 있거나 더 구체적으로 previousState 의 측면을 이해하는 데 문제가 있습니다 .
일반적인 useState Hook 및 아마도 가장 일반적인 예는 다음과 같습니다.
import React, { useState} from 'react';
export default function CounterHooks({ initialCount }){
const [count, setCount] = useState(initialCount);
return (
<div>
<button onClick={() => setCount(count -1)}>-</button>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}
지금까지 내가 이해하고있는 것은 다음과 같습니다.
- useState () 함수 / 후크를 호출합니까? 초기 상태 (initialCount)의 인수를 전달합니다.
- 나는 즉시 변수 count 및 setCount (함수)로 파괴하는 배열을 얻습니다.
- setCount ()를 사용하면 상태를 업데이트 할 수 있으므로 count 변수
지금까지 좋은 것 같아요 ...;)
때때로 나는 이해하지 못하는 prevState (prevCount)와 동일한 카운터 예제를 봅니다.
<button onClick={() => setCount(prevCount => prevCount -1)}>-</button>
여기서 무슨 일이 일어나나요? 이 부분은 이해가 안 돼요. 지금까지 내 생각 :
- 이 경우 어떻게 든 이전 카운트 값에 액세스합니다.
- setCount는 이제 함수를 예상합니다.
- setCount는 이제 비동기로 실행됩니다.
- 이 함수의 출처는 어디입니까?
- prevCount의 출처는 어디입니까?
- 이것을 실행하면 prevCount에 무엇이 들어 갑니까?
내 혼란을 이해합니까? 이걸 어떻게 다르게 구성해야할지 모르겠네요 ...
당신의 도움을 주셔서 대단히 감사합니다.
답변
먼저 공식적인 설명을 여기에서 볼 수 있습니다 .
이 경우 어떻게 든 이전 카운트 값에 액세스합니다.
어떻게 든 이전 카운트 값에 액세스 하지 않습니다 . 기능 업데이트를 사용하고 setter에 콜백 함수를 제공하면 이전 상태를 반환하고 콜백 함수에서이 값을 사용합니다.
setCount는 이제 함수를 예상합니다.
함수를 제공하므로 사용할 수 있습니다.
setCount는 이제 비동기로 실행됩니다.
사실은 아닙니다. 비동기 함수가 아닙니다. 이전 상태를 제공하고 사용합니다. 상태 설정자는 비동기식이 아니며 상태 업데이트는 있습니다.
이 함수의 출처는 어디입니까?
prevCount의 출처는 어디입니까?
이미 대답했습니다.
이것을 실행하면 prevCount에 무엇이 들어 갑니까?
거기에 새로운 상태로 설정할 것을 제공합니다. 귀하의 예에서 count1 씩 증가시키고 싶으 므로+ 1
이 논리에 대한 순진한 설명이 있습니다. 순진한 것입니다. 콜백 로직을 예시하기 위해 이것을 추가하고 있습니다. 이것은 React의setState.
let state = 5;
function setState(val) {
if (typeof val === "function") {
return val(state);
}
return val;
}
const stateWithFunctionalUpdate = setState(prev => prev + 1);
const stateWithNormalUpdate = setState(9);
console.log(stateWithFunctionalUpdate);
console.log(stateWithNormalUpdate);아마도이 예제는 React의 상태 설정 로직을 모방하는 데 적합 할 것입니다. 다시 말하지만 순진한 접근 방식입니다.
let state = 5;
function setState(val) {
if (typeof val === "function") {
state = val(state);
} else {
state = val;
}
}
setState(9);
setState(prev => prev + 1);
console.log("state", state);(타이핑없이) 의 실제 구현 을 살펴 보겠습니다 useState.
export function useState(initialState) {
return useReducer(
basicStateReducer,
// useReducer has a special case to support lazy useState initializers
initialState
);
}
글쎄, 그것은 useReducer커튼 뒤에서 사용 합니다. 초기 상태를 설정하고 다음과 같은 basicStateReducer 를 사용합니다 .
function basicStateReducer(state, action) {
return typeof action === "function" ? action(state) : action;
}
우리의 순진한 접근 방식과 마찬가지로 유형을 찾고 action그에 따라 작동합니다. 마지막으로 다음이 useReducer 반환됩니다 .
return [workInProgressHook.memoizedState, dispatch];
따라서 하루가 끝날 때에 함수를 제공하면 해당 함수를 useState가져온 다음 상태에서 실행하고 값을 반환합니다.
내가 이해하는 방법은 다음과 같습니다.
이 경우 어떻게 든 이전 카운트 값에 액세스합니다. -> setCount는 param을 확인하고, param이 콜백이면 해당 콜백을 호출하고 param에 대한 이전 상태를 전달합니다. 콜백 결과는 다음 상태가됩니다.
setCount는 이제 함수를 기대합니다 -> 예, 함수는 논리를 처리하고 다음 상태를 반환합니다.
setCount는 이제 asynchron 실행 ->이 함수는 synchron이지만 결과를 반환 한 후에 실행됩니다. setCount에 대한 후크는 이벤트를 전달하여 다음 상태를 업데이트합니다.
이 함수의 출처는 어디입니까? -> param이 현재 상태이고 다음 상태를 반환하는 한 함수에서 무엇이든 할 수 있습니다.
prevCount의 출처는 어디입니까? -> setCount를 호출 할 때 전달됩니다 (현재 상태에서 가져옴).
이것을 실행하면 prevCount에 무엇이 들어 갑니까? -> setCount의 현재 상태.
=> 값을 전달하는 방법이나 setCount에 대한 콜백의 예 : useState 후크, setState 함수. 이전 상태 값에 액세스