TIL : React fiber

React fiber는 스택구조와 다르다 

나중에 들어간 Fiber노드를 가장먼저 꺼낼 필요가 없음 

들어간 순서와 무관하게 꺼낼 수 있음 

 

React가 fiber구조를 선택한 이유 

 

렌더링 할 때의 순서를 유연하게 가져갈 수 없음 

변화가 16버전부터임 원래는 스택구조였으나 fiber아키텍처를 사용

 

 

 

 

React 패키지의 구성요소들 & 용어정의 

 

react 코어 

 

renderer

 

event(legacy-events)

SyntheticEvent – React

기존 웹의 이벤트 시스템을 wrappping해서 추가적 이벤트 시스템을 개발함 

 

scheduler

task단위로 작업 수행 비동기로 수행

task 실행타이밍을 알고 있는 패키지

스케줄링 담당

 

reconciler

fiber architecture의 VDOM재조정 담당

컴포넌트 호출

 

VOM의 구조

 

 

fiber node로 구성된 tree형태, 더블 버퍼링 구조 를 가지고 있음 

 

current tree

Root Node와 연결되어있음 현재 돔과 동일한 형태

 

 

workInProgress tree

render phase에서 작업중인 fiber

 

작업중인 트리 current tree를 자기복제 해서 만들어짐

alternate이라는 키를 가지고 있는데 그 value로 workInProgress가 있다.

 

render phase -> commit phase를 지나면서 workInProgress tree는 current tree가 됨

 

root node와 current트리의 연결에서 workInProgress로 연결하여 current tree로 되고 

workInProgress는 current tree를 복제해서 만들어 짐

 

더블 버퍼링 구조 

current tree와 workInProgress tree를 같은 것을 두번 가지고 있는 구조

왜? 유연하게 삭제 및 수정을 하고 순서를 유연하게 가져가기 위한 구조

 

렌더링

 

컴포넌트렌더링 -> 호출 -> react return fiber node를 vdom에 반영과정까지

돔에 마운트 -> 돔을 브라우저에 페인트 렌더링 x

 

React life cycle

 

-render phase

VDOM재조정

WORK 패키지 :  리컨실러 컴포넌트 변경 돔에 적용하기 위해 수행하는 단계

스케줄러에 work를 등록

리컨실러 아키텍처가 stack -> fiber 렌더링 우선순위 변경 가능 

 

 

-commit phase

VDOM을 DOM에 적용 . lifecycle에 실행하는 단계 

sync실행 

리액트가 콜스택을 비워준 다음 브라우저가 paint시작