[React 까보기 시리즈] 리액트가 WORK 를 처리하다가 브라우저에게 thread 를 양보하는 이유?(user event 처리와 브라우저의 렌더링 프로세스)

requestHostTimeout 과 requestHostCallback 

 

requestHostTimeout

setTImetout 활용 

 

requestHostCallback

Channel Messaging API 

MessageChannel() 종이컵 전화기로 비유하면, 

   - port1 컵1  

        - onmessage 귀 

        - postMessage 입 

   - port2 컵2

        - onmessage 귀 

        - postMessage 입 

 

실행 

scheduledHostCallback = callback(flushWork) 전역 변수에 할당

isMessageLoopRunning 메세지루프 안돌고 있으면 

   - port.postMEssage(null) 호출 -> port1.onmessage = performWorkUntilDeadline 호출 

 

calcelHostCallback 

scheduledHostCallback = null 

 

performWorkUntilDeadline  

performWorkUntilDeadline()는 callback(flushWork)를 호출하는데 flushWork()의 반환 값에 따라 작업을 모두 완료했거나 또는 작업 중 host_config가 할당한 시간(deadline)을 넘긴 경우

 

yieldInterval yield 하는 사이 시간 

deadline은 마감 시간 

WORK는 메모리 작업(WORK는fiber임. 즉 이는 fiber 재조정 작업 (reconciler가 수행하는 reconciliation)) 

scheduledHostCallback이 null이면 isMessagingLoopRunning = false 

scheduledHostCallback이 null이 아니면(fulshWork이 할당되어 있으면)

    - deadline = currentTime + yieldInterval 

    - hasTimeRemaining 언제나 true 

     - hasMoreWork = scheduledHostCallback(true, currentTime) 

            - hasMoreWork이 false면 

                  - isMessagingLoopRunning = false 

                  - scheduledHostCallback = null