home

React Fiber

글 분류
small
키워드
react
생성일
2024/02/23 10:51
최근 수정일
2024/03/02 16:26
작성중
Reconciliation algorithm → 이전 버전의 VDOM과 새로운 버전의 VDOM의 차이를 확인하는 알고리즘
react를 더 똑똑하고 빠르게 작동하기위해 react 16에 적용된 reconciliation algorithm
Reconciliation algorithm은 모든곳에서 사용된다, 렌더러 - 브라우저, 모바일앱 등등은 바뀔 수 있다.

중요 변경 사항

새로운 업데이트에 따라 컴포넌트 렌더링 작업을 pause, resume, restart 할 수 있게 됐다.
이전(동기식 stack reconciler)에는 중간에 렌더를 멈출 수 없었고 동기적으로 stack conciler가 비워질때 까지(실행 될 때 까지) 기다렸어야 했다.
이전에 완료된 작업을 재활용 할 수 있으며, 필요없을 경우 중단 할 수 있게 됐다.
중요도에 따라 작업을 청크로 묶을 수 있게 됐다.
high priority update(타이핑), low priority update(서버로 부터 오는 값들, 댓글의 좋아요 갯수)로 나눈다.

Stack Reconciler

Fiber 이전의 Reconciler, stack 형태로 Last In First Out으로 작업을 처리한다.
60 fps를 위해서는 16.67ms안에 렌더링해야 한다.
blindly 모든 업데이트를 우선순위 구분없이 항상 그때 그때 업데이트 했다. → reconciliation 알고리즘의 순회 시간이 16.67ms 이상 소요될 경우 프레임이 드랍됐다.

Fiber Reconciler

JS 실행스택, event queue 기억나는가? 실행스택이 전부다 비워져야 event queue에 있는 콜백 함수들이 실행되는 그것.
reconciliation 과정 도중에 새로운 업데이트가 도착하더라도 기존 reconciliation이 전부 끝나야 새로운 업데이트가 처리됐었다. → 이로인해 느린거였음
fiber → 가상 stack frame이라고 생각하면 편하다.

참조