setState 콜백을 제거하는 것이 잘못된 설계입니까?
3229 단어 discussreactprogramming
setState(updater[, callback])
.setState
업데이트가 적용된 후 실행되도록 보장되는 콜백입니다.그러나
setState
후크에서 반환된 useState()
메서드를 사용하면 더 이상 callback
가 없습니다.setState(updater[, callback])
와 setState
가 useState()
후크로 반환되는 것을 비교해 봅시다.// We can see all the logic at a glance
const onIncreaseButtonClick = () => {
// step 1. Updating the state
const nextState = {};
this.setState(nextState, () => {
// step 2. call API
});
}
//...
const [state, setState] = useState();
useEffect(() => {
// step 2. call API
}, [state]);
// We need to scroll the editor to the top to see the second part of the logic
// 200 lines code
// ...
// ...
const onIncreaseButtonClick = () => {
// step 1. Updating the state
const nextState = {};
setState(nextState);
}
차이점이 보이시나요?
버튼 클릭 이벤트가 발생하면 상태 업데이트와 API 호출이라는 두 가지 논리 부분이 있습니다.
전자의 경우 논리 코드의 두 부분이 함께 구성되어 실행 순서와 코드 작성 순서가 동일합니다.
후자의 경우 논리의 두 부분이 서로 다른 위치로 분할되며 상태를 업데이트하는 논리는 이벤트 핸들러에 있고 호출 API에 대한 논리는
useEffect()
에 배치됩니다. 그리고 실행 순서와 읽기(쓰기) 순서가 같지 않습니다.어떤 사람들은 https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react과 같이 나와 같은 견해를 가지고 있습니다.
그래서 누군가가
useStateCallback
후크를 구현합니다.어떻게 생각해?
Reference
이 문제에 관하여(setState 콜백을 제거하는 것이 잘못된 설계입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mrdulin/is-it-a-bad-design-to-remove-the-setstate-callback-dm1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)