react 의 setState 실행 메커니즘

소개 하 다.
react 에서 구성 요소 자체 의 상 태 는 state 를 통 해 유지 되 지만 state 는 직접 수정 할 수 없습니다.setState 방법 을 사용 하여 수 정 된 state 와 원래 의 state 를 비교 하여 새로운 state 를 구성 해 야 합 니 다.
쓰다

constructor(props) {
    super(props);
    this.state = {
        value: 1
    }
}
componentDidMount() {
    this.setState({
        value: 2 //   value    2
    })
}

이 때 같은 역할 영역 에서 이 value 를 사용 하고 싶 은 데 얻 을 수 없 나 요?

componentDidMount() {
    this.setState({
        value: 2
    })
    console.log(this.state.value)
}

결과 출력 은 1 입 니 다.저 는 분명히 그것 을 바 꾸 었 지만 찾 을 수 없습니다.먼저 setState 는 비동기 작업 이 라 고 생각 합 니 다.출력 문 구 는 동기 코드 로 먼저 실 행 했 습 니 다.(js 는 동기 코드 를 먼저 실행 한 다음 에 비동기 대기 열 을 찾 습 니 다)그러면 지금 어떻게 해결 해 야 합 니까?해결 방법(추가 필요):

async/await

async componentDidMount() {
    await this.setState({
        value: 2
    })
    console.log(this.state.value)
}

setState 의 두 번 째 매개 변 수 는 리 턴 함수 로 이 를 이용 하여 얻 을 수 있 습 니 다

componentDidMount() {
    this.setState({
        value: 2
    }, () => {console.log(this.state.value)})
}

componentDid Mount 에서 여러 개 를 사용 하면 어 떨 까요?

componentDidMount() {
    this.setState({
        value: this.state.value + 1
    })
    this.setState({
        value: this.state.value + 1
    })
}

결국 2 를 수출 하 다 니,너 는 비동기 라 도 이렇게 놀 수 는 없 잖 아.그럼 문 제 는 어디 에 있 니?먼저,setState 는 갈고리 함수 의 state 를 통합 합 니 다.각각 setState 를 state 상태 유지 보수 대기 열 에 추가 하고,최종 적 으로 하나의 state 를 구성 한 다음 에 렌 더 링 을 합 니 다.그러면 상기 두 개의 같은 setState 는 하나 로 합 쳐 집 니 다.그래서 setState 작업 을 했 을 뿐 인 데 왜 이런 합병 방식 을 취 했 습 니까?state 가 변 하면 구성 요소 의 재 렌 더 링 을 촉발 하기 때문에 합병 은 렌 더 링 횟수 를 줄 이 고 성능 을 향상 시 키 는 역할 을 합 니 다.
setState 는 정말 비동기 동작 입 니까?
우선 setState 자 체 는 비동기 코드 로 작 성 된 것 이 아 닙 니 다.이것 은 확인 할 수 있 습 니 다.그러나 setState 를 만나면 상태 대기 열 에 놓 여 합 쳐 지 기 를 기다 리 기 때문에 이 때 는 새로운 state 를 즉시 가 져 올 수 없 기 때문에'비동기'라 고 볼 수 있 지만 동기 화 될 수도 있 습 니 다.

componentDidMount() {
        setTimeout(() => {
            this.setState({
                value: this.state.value + 1
            })
            this.setState({
                value: this.state.value + 1
            })
            console.log(this.state.value)
        })
}

이상 의 코드 가 3 을 출력 했 습 니 다.setTimeout 타이머 가 하나 더 추가 되 었 기 때 문 입 니까?setState 는 합성 이벤트 와 갈고리 함수 에서 만'비동기'이 며,네 이 티 브 이벤트 와 setTimeout 에서 모두 동기 화 됩 니 다.
더욱 깊이 들어가다

enqueueUpdate setState 는 최종 적 으로 enqueueUpdate 함 수 를 통 해 state 업 데 이 트 를 실행 합 니 다

function enqueueUpdate(component) {
  ensureInjected();
  //        (      )
  if (!batchingStrategy.isBatchingUpdates) {
    batchingStrategy.batchedUpdates(enqueueUpdate, component);
    return;
  }
  //     （        ）
  dirtyComponents.push(component);
}

isBatchingUpdates 이 변 수 는 합병 업 데 이 트 를 하 느 냐 에 달 려 있 습 니 다.true 는 합병 업 데 이 트 를 하 는 것 입 니 다.false 는 갈고리 함수 에 들 어가 기 전에 이 변 수 는 초기 값 이 true 이 고 현재 갈고리 의 합병 업데이트(업데이트 작업 을 하지 않 은 것 포함)가 완료 되면 false 가 되 기 때문에 setTimeout 에서 동기 화 됩 니 다.합병 작업 을 하지 않 습 니 다.
요약:

setState 는 갈고리 함수 에서'비동기'작업 으로 합병 을 기 다 려 야 결 과 를 얻 을 수 있 습 니 다

4.567917.setState 는 원생 사건 과 setTimeout 에서 모두 동기 화 되 어 결 과 를 직접 얻 을 수 있 습 니 다.