기능 업데이트 형태로 React useState를 사용해야 하는 이유는 무엇입니까?
P粉155551728
P粉155551728 2023-10-22 15:37:50
0
2
704

기능 업데이트에 대한 React Hook 문서를 읽는 중 다음 인용문을 보았습니다.

"+" 및 "-" 버튼은 업데이트로 인해 기능적 형태를 사용합니다. 값은 이전 값을 기준으로 합니다 ​​

하지만 기능 업데이트를 요구하는 목적이 무엇인지, 기능 업데이트를 요구하는 것과 이전 상태를 직접 사용하여 새 상태를 계산하는 것의 차이점은 무엇인지 알 수 없습니다.

React useState Hook의 업데이트 기능에 기능 업데이트 양식이 필요한 이유는 무엇인가요? 차이점을 명확하게 확인할 수 있는 예가 있습니까(직접 업데이트를 사용하면 오류가 발생함)?

예를 들어 문서에서 이 예를 변경하면

으아아아

직접 업데이트count:

으아아아

동작에 아무런 차이가 보이지 않으며 카운트가 업데이트되지 않는(또는 최신이 아닌) 상황을 상상할 수 없습니다. 개수가 변경될 때마다 onClick의 새로운 클로저가 호출되어 최신 onClick 的新闭包,捕获最新的 count을 캡처하기 때문입니다.

P粉155551728
P粉155551728

모든 응답(2)
P粉818125805

최근에 이런 필요성을 우연히 발견했습니다. 예를 들어 특정 수의 요소로 배열을 채우고 일부 사용자 작업에 따라 해당 배열에 추가할 수 있는 구성 요소가 있다고 가정해 보겠습니다. (예를 들어 제 경우에는 사용자가 한 번에 10개의 항목을 로드하기 때문에 아래로 스크롤하면 코드는 다음과 같습니다.

으아악

확실히 setFeedItems를 호출하기 때문에 useEffect 후크의 종속성 목록에 FeedItems를 추가할 수는 없으므로 루프에 빠지게 됩니다.

구조 기능 업데이트:

으아악
P粉457445858

React의 상태 업데이트는 비동기식입니다. 따라서 다음 업데이트 시 count에 이전 값이 있을 수 있습니다. 예를 들어 다음 두 코드 예제의 결과를 비교해 보세요.

으아아아

그리고

으아아아
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿