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(동기)
'TIL' 카테고리의 다른 글
PDF.js를 활용해 PDF 임베드하기: pdfjs-dist 사용법 (1) | 2024.11.27 |
---|---|
[React 까보기 시리즈] React concurrent mode 맛보기? performConcurrentWorkOnRoot 까보기 (0) | 2024.11.07 |
[React 까보기 시리즈] Virtual DOM 의 맨 위에는 어떤 node 가 있을까? root node 까보기(feat. CRA) (0) | 2024.11.07 |
[React 까보기 시리즈] Fiber 생성 과정 (0) | 2024.11.07 |
[React 까보기 시리즈] React component가 return하는 html은 babel을 만나서 어떻게 변할까? (createElement 함수 까보기) (0) | 2024.11.07 |