본문 바로가기

TIL

[React 까보기 시리즈] React concurrent mode 맛보기? performConcurrentWorkOnRoot 까보기

https://www.youtube.com/watch?v=W5_jtoRPgR0

 

performConcurrentWorkOnRoot 

 

- 비동기 작업 : performConcurrentWorkOnRoot  

- 동기 작업 : performSyncWorkOnRoot 

 

함수 까보기 

callbackNode Task를 소비하는 과정 -> null을 할당할 때까지 진행 

root.callbackNode(scheduleCallback의 return 값 즉 Task // Work를 Task로 만드는 함수이므로 결국엔.)은 

- commit phase 지나면 null로 초기화 

- null이 아니다? -> Work를 진행하다 중지됨 

      - workLoopConcurrent에서 while문 중지됨 -> performUnitOfWork 호출 못함 -> workInProgress가 null 할당이 안됨 ->               commit phase에 도달 못함 -> callbackNode에 null 할당 X

       (workInProgress(render phase에서 작업중인 fiber) -> commit phase -> current) // current가 되고나면 workInProgress가 null이되는 것! 

ensureRootIsScheduled 호출 후에도 

(각 phase 진행 중 추가적인 UPDATE 발생할 경우를 대응하기 위하여 스케줄링 요청 -> callbackNode가 바뀔 수 있음) 

여전히 root.callbackNode가 originalCallbackNode와 같다면

현재 callbackNode(Task)가 최우선이므로 peformConcurrentWorkOnRoot를 bind해서 return -> scheduler가 다음 프레임에서 performConcurrentWorkOnRoot을 실행  // return null이 될때까지

 

 

 

* workInProgress가 null이 아니면 아직 render phase / null이면 commit phase