[React 까보기 시리즈] Fiber 구조로 가능해진 Concurrent mode 와 Sync WORK 를 처리하는 방법?

https://www.youtube.com/watch?v=A6KGVmvEV-s

 

concorrent = 우선순위 조정이 가능하다

Fiber 구조로 가능해진 Concurrent mode 와 Sync WORK 를 처리하는 방법?

scheduleCallback, scheduleSyncCallback

- 비동기(Concurrent WORK) 

    - 수행해달라는 performConcurrentWorkOnRoot()에 root를 bind해서 schedulerCallback에 전달 -> Scheduler_scheduleCallback에 전달 

 

- 동기(Sync WORK) 

   - 수행해달라는 performSyncWorkOnRoot()에 root를 bind해서 scheduleSyncCallback에 전달 -> callback 담아두는 queue에 저장 -> queue를 비우는 flushSyncCallbackQueueImpl 을 스케줄링 

    (다음 프레임에서 scheduler에 의해 flushSyncCallbackQueueImpl 실행) 

   - 만약 리액트가 NoContext여서 flushSyncCallback 호출했다면 

        - flushSyncCallbackQueueImpl이 스케줄링 되어있는지 확인 후 

              - 스케줄링이 되었으면 취소하고 flushSyncCallbackQueueImpl 실행 (queue를 비우는 함수) 

              - 스케줄링이 안되어있으면 flsySyncCallbackQueueImpl 실행 

 

 

 

ScheduleCallback 

reconcilier와 scheduler의 priority 값이 다르므로 변환 필요 

Scheduler_scheduleCallback 함수로 스케줄러에게 콜백 전달