[React 까보기 시리즈] Scheduler 시작!Task 까보기, 리액트가 Concurrent mode에서 업데이트를 수행하는 과정(Task 처리)

https://www.youtube.com/watch?v=8IwUdtULaec

Scheduler 시작! (Task 까보기)

scheduler : react는 Task를 비동기로 실행함. 이 Task를 실행하는 타이밍을 알고 있는 패키지

 

Scheduler_scheduleCallback 

스케줄러는 전달받은 callback(WORK를 perform하는 함수)을 Task 객체에 담아 관리 

Task 객체에는 여러 속성값이 있음 

(callback, priorityLevel는 전달받은 값, 또 startTime, expirationTime도 있음) 

 

startTime과 expirationTime 

스케줄러에서는 startTime과 expirationTime이 시작시간과 만료시간의 의미를 가짐 

reconciler가 options에 timeout과 delay를 담아 전달하고 

(options는 concurrent mode에서만 전달함) 

이를 활용해서 scheduler에서 startTime, expirationTime 값을 계산 

- startTime = currentTime + delay 

- expirationTime = startTime + timeout 

 

options가 없거나 options.timeout이 없다면 timeoutForPriorityLevel에서 priorityLevel로 구함 

(reconciler는 Sync WORK의 priorityLevel을 Scheduler_ImmediatePriority로 전달 

해당 priorityLevel의 timeout은 -1이므로 expirationTime이 currentTime보다 1ms 더 빠름 -> 최고 빠름) 

 

 

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

리액트가 Concurrent mode에서 업데이트를 수행하는 과정(Task 처리) 

Task 처리 

뒤에 처리할 것은 Timer에 등록 or 지금 처리할 것은 실행 후 reconciler에게 return 하여 root에 기입 

생성된 Task들은 binary heap(우선순위 큐)에 추가되어 정렬(기준은 sortIndex) 

 

Timer

delay가 0보다 큰 Task(startTime이 currentTime보다 큰 것들)

timeout이 지나면 Task가 된다 

sortIndex에 startTime 할당(delay가 작은 것(먼저 시작되어야 하는 것)부터 앞에 정렬)

   - 만약 taskQueue에 task가 없고 timerQueue에 최신이 새로 생성된 timer라면 

          - 기존에 request가 되어있다면 cancel/hostTimeout 해야 함 

 

handleTimeout

1순위 Timer가 timeout 되면 호출되는 함수 

-> advanceTimers(currentTime)으로 timer를 꺼내서 taskQueue에 추가 

 

advanceTimers 

 - Timer가 있으면 

      - Task가 취소되면 timer.callback이 null이 되므로 취소된 Task(Timer)를 꺼낸다 

            - Timer가 만료되면 timerQueue에서 꺼내서 sortIndex를 바꾸고 taskQueue에 추가

            - Timer가 아직 만료되지 않았다면 return해서 바로 종료 

      - 그리고 timerQueue에서 맨 앞에 timer를 꺼낸다(while문) 

 

handleTimeout 이어서 

   - requestHostCallback이 호출되지 않았고 

       - Timer가 taskQueue로 옮겨졌으면 

            - requestHostCallback 호출(flushWork(taskQueue 소비) 전달) 

 

Task

    - requestHostCallback 호출(flushWork(taskQueue 소비) 전달)