[React 까보기 시리즈] 리액트가 이벤트를 처리하는 우선 순위의 기준값은? & 리액트 16버전에서 대부분의 UPDATE 를 처리하는 방법(feat. Sync)

리액트가 이벤트를 처리하는 우선 순위의 기준값은? 

https://www.youtube.com/watch?v=2s9nlq06t3g

markUpdateTimeFromFiberToRoot 함수에서 하는 일 

reconciler에서 fiber의 expirationTime가 큰(먼저 발생한) 이벤트부터 처리 (더 큰 expirationTime을 새롭게 할당 - 먼저 발생한 이벤트를 먼저 처리할 수 있도록 expirationTime 값 업데이트) 

 

expirationTime 

currentTime -> requestCurrentTimeForUpdate -> msToExpirationTime -> MAGIC_NUMBER_OFFSET - (( ms / UNIT_SIZE)| 0); 

즉 ms(now())가 작을수록 (먼저 발생할수록) expirationTime이 커짐 

 

MAGIC_NUMBER_OFFSET 

sync = MAX_SIGNED_31_BIT_INT 

MAX_SIGHED_31_BIT_INT를 사용하면 이론적으로 now()가 0이 될 수 있으므로 sync와 같은 값

이를 막기 위해 -1을 해서 batched 값 얻고 -1 해서 MAGIC_NUMBER_OFFSET 얻음 

 

NoWork와 Idle

NoWork 스케줄링 된 WORK가 없다 = 0 

Idle 진행중인 업데이트가 없다 = 2 

 

 

 

리액트 16버전에서 대부분의 UPDATE 를 처리하는 방법(feat. Sync) 

https://www.youtube.com/watch?v=crS-e3hdD5U

 

scheduleWork 함수 따라가며 조건의 의미를 파악하고 특정 함수를 호출할 때 필요하면 함수를 따라가고 아니면 그 함수 호출의 의미를 설명하는 방식으로 분석 진행 

 

동기 호출 or 비동기 호출일 때(expirationTime이 Sync일 때, 아닐 때) 

• 동기 
  • VDOM이 처음 생성될 때
    • 동기로 재조정 작업(WORK)를 수행해 줄 함수 호출 -> 바로 WORK를 실행해서 VDOM을 완성 
  • 이미 생성된 것을 업데이트 
    • ensureRootIsScheduled(root) root에 WORK 스케줄링 요청하고 정보를 할당 
    • executionContext가 NoContext면 (reconciler가 실행 X면) flushSyncCallbackQueue를 호출하여 sync queue에 담겨있는 WORK를 실행 
• 비동기
  • ensureRootIsScheduled(root) root에 WORK 스케줄링 요청하고 정보를 할당

scheduleUpdateOnFiber 함수는 스케줄링하기 전, 후의 로직(사전 준비 등)이 실행되는 입구 같은 함수 

 

스케줄링과 관련된 로직은 ensureRootIsScheduled에서 

WORK를 스케줄링 하기 전에 필요한 정보들 가져오기 

• currentTime
• expirationTime
• 위 2개를 활용 -> WORK 우선순위 
• 우선순위대로 기존 WORK를 취소 or 처리
• root에 WORK 스케줄링을 요청하고 스케줄링 정보를 할당