비동기 대기가 React setState와 연동되는 이유는 무엇입니까?

비동기 대기가 React setState와 연동되는 이유는 무엇입니까?

리액트에 babel이 있는 비동기 wait를 사용하고 있습니다.JS 프로젝트React setState를 사용할 때 편리하다는 것을 알게 되었습니다.이것에 대해 좀 더 이해하고 싶다고 생각하고 있습니다.다음 코드를 고려하십시오.

handleChange = (e) => {
  this.setState({[e.target.name]: e.target.value})
  console.log('synchronous code')
}

changeAndValidate = async (e) => {
  await this.handleChange(e)
  console.log('asynchronous validation code')
}

componentDidUpdate() {
  console.log('updated component')    
}

컴포넌트가 갱신된 후에 비동기 검증 코드를 실행하려고 했습니다.그리고 효과가 있다!결과 콘솔로그에는 다음과 같이 표시됩니다.

synchronous code
updated component
asynchronous validation code

검증 코드는 handleChange가 상태를 업데이트하고 새 상태가 렌더링된 후에만 실행됩니다.

보통 상태가 갱신된 후에 코드를 실행하려면 이 후에 콜백을 사용해야 합니다.setState.즉, handleChange 후에 어떤 것을 실행할 경우 콜백 파라미터를 지정해야 합니다.이 파라미터는 setState로 전달됩니다.안이쁘다.단, 이 코드 예에서는 상태가 갱신된 후 handleChange가 완료되었음을 대기하고 있습니다.하지만 나는 기다림은 약속으로만 하고, 계속하기 전에 약속이 풀리기를 기다린다고 생각했다.handleChange에는 약속도 없고 해결도 없습니다...뭘 기다려야 하는지 어떻게 알죠?

즉, setState는 비동기적으로 실행되며 대기 상태가 완료되는 시기를 어느 정도 인식하고 있는 것으로 보입니다.setState가 내부적으로 약속을 사용하는 것은 아닐까요?

버전:

반응: "^15.4.2"

babel-core: "^6.26.0"

babel-flash-env: "^1.6.0",

babel-flash-flash: "^6.24.1",

babel-context-stage-0: "^6.24.1"

babel-system-import-displer: "^3.1.0",

babel-glin-glinators-clinators-clinatorsublinators-matrix: "^1.3.4",

babel-flash-flash: "^6.23.0"

저는 Davin의 답변을 심플화하고 보완하기 위해 최선을 다했습니다.그러면 실제로 무슨 일이 일어나고 있는지 더 잘 알 수 있습니다.

---

1. wait는 이 앞에 배치됩니다.handleChange, 그러면 나머지 changeAndValidate 함수의 실행이 wait가 오른쪽에 지정된 값을 해결할 때만 실행되도록 스케줄링됩니다.이 경우 이 함수에 의해 반환된 값이 됩니다.handleChange

2. this.handleChange는 대기 오른쪽에 다음과 같이 실행됩니다.

   2.1. setState는 업데이터를 실행하지만 setState가 즉시 업데이트를 보장하지 않기 때문에 업데이트를 나중에 실행하도록 잠재적으로 스케줄링합니다(즉시 업데이트든 나중에 업데이트하든 상관없습니다. 중요한 것은 스케줄이 되어 있다는 것입니다).

   2.2. console.log'synchronous code')는 다음을 수행합니다.

   2.3. this.handleChange는 정의되지 않은 반환을 종료합니다(특별히 지정되지 않은 한 함수가 정의되지 않은 상태로 반환되므로 정의되지 않은 반환).

3. wait는 이것을 정의되지 않은 상태로 받아들이고 약속이 아니기 때문에 Promise.resolve(미정의)를 사용하여 이를 해결된 약속으로 변환하고 기다립니다.그것은 백그라운드에서 비동기 메서드에 전달되기 때문에 즉시 사용할 수 없습니다.

약속에 전달된 콜백은 JavaScript 이벤트 루프의 현재 실행이 완료될 때까지 호출되지 않습니다.

3.1. 즉, 정의되지 않은 것이 이벤트 큐의 뒤쪽에 배치됩니다(즉, 이벤트 큐의 setState 업데이트 프로그램 뒤에 배치됩니다).

4. 이벤트 루프가 최종적으로 도달하여 setState 업데이트를 픽업합니다.이 업데이트는 이제 실행됩니다.

5. 이벤트 루프가 도달하여 정의되지 않은 상태로 선택되며, 이는 정의되지 않은 것으로 평가됩니다(원하는 경우 이 값을 저장할 수 있으므로 해결된 결과를 저장하기 위해 대기 시간 앞에 일반적으로 사용되는 =).

   5.1. 이것으로 Promise.resolve()가 종료되었습니다.즉, 대기 상태가 해제되어 나머지 함수는 재개할 수 있습니다.

6. 검증 코드가 실행됩니다.

아직 테스트하지 않았습니다만, 제 생각에는 다음과 같습니다.

undefined returned returned returned returned returned returned returned returned returnedawait은 "" 뒤에 .setState★★★★await 있다Promise.resolveregenerator-runtime이벤트 루프의 다음 항목에 대한 제어 권한을 부여합니다.

라고 할 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수, 수.setState이 " " " .await.

하려면 , setTimeout(f = > setTimeout(f = > f, 0)의 주위에 = > f, 0)을.setState.

regenerator-runtimebabel으로는 ''를 사용하는 입니다.Promise.resolve제어할 수 있습니다._asyncToGenerator의 내부를 볼 수 있습니다.이 내부에는Promise.resolve.

setState()컴포넌트 매뉴얼이 항상 즉시 갱신되는 것은 아닙니다.

하지만 여기의 경우일 수도 있다.

콜백을 약속으로 대체할 경우 직접 구현할 수 있습니다.

setStateAsync(state) {
  return new Promise((resolve) => {
    this.setState(state, resolve)
  });
}

handleChange = (e) => {
  return this.setStateAsync({[e.target.name]: e.target.value})
}

참조 : https://medium.com/front-end-hacking/async-await-with-react-lifecycle-methods-802e7760d802

rv은 다음과 같이됩니다.

rv
Returns the fulfilled value of the promise, or the value itself if it's not a Promise.

값이 경우 반환되지 handleChange는 반환되지 ).undefined따라서 "handle Change가 완료되었음을 알리기 위한 비동기 이벤트루프 트리거는 없습니다.그냥 지정한 순서대로 실행됩니다.

간단한 예를 들어보겠습니다.test-02, 코드await this.setState({ a: 10 });실제로, 는this.setState({ a: 10 }); await undefined;에서test-03.그리고.await undefined;는 그 배후에 있는 코드를 다음 이벤트루프에서 실행합니다.

언급URL : https://stackoverflow.com/questions/47019199/why-does-async-await-work-with-react-setstate