[React 까보기 시리즈] 리액트가 WORK를 스케줄링하는 과정을 까보자

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

 

reconciliation(재조정) 직전까지 과정 정리 

과정(한 줄 요약) 

 

리액트는 UPDATE 정보를 담은 WORK를 Task로 관리하다가 perform해서 reconciliation한다. 

reconciler -> scheduler -> reconciler 

 

상세 과정(callback의 여행) 

callback : WORK를 perform하는 함수(performWorkOnRoot)

 

1. reconciler는 dispatchAction으로 UPDATE를 담은 WORK를 만든다 

2. WORK를 스케줄링한다

     (Task로 만들 준비를 하여 scheduler에게 전달) 

         a. scheduleWork: fiber에 expirationTime 할당, ensureRootIsScheduled 호출 

         b. ensureRootIsScheduled : root에 스케줄링정보(expirationTime, priorityLevel) 할당 scheduleCallback호출 

         c. scheduleCallback : sync callback Queue에 저장, callback을 scheduler에게 전달, Scheduler_scheduleCallback(priorityLevel, callback, option) 호출 

// 여기까지가 reconciler 

// d 부터 scheduler 

         d. Scheduler_scheduleCallback : 여기서부터 scheduler, scheduler는 전달받은 callback을 Task에 담아 (WORK -> Task) heap에 추가  // Work를 스케줄링하면 Task가 된다. 

3. scheduler는 Task를 적절한 타이밍에 perform 한다. 

(즉, WORK 안에 callback을 호출한다 === reconciler에게 WORK를 전달한다.)

        a. scheduler_host_content (host: 환경을 의미함, 브라우저라고 이해하면 됨) 

                1) requestHostCallback (host에게 callback을 전달) 

                2) postMessage 

                3) performWorkUntilDeadline

        b. workLoop에서 host가 알려주는 적절한 타이밍에 flushWork(requestHostCallback) 호출하여 heap에 담긴 Task 수행 즉, callback 호출 

                1) performConcurrentWorkOnRoot(비동기)

                2) flushSyncCallbackQueueImpl

                         1. performSyncWorkOnRoot(동기)