React-reconciler | Fiber (19.0.0)

react/packages/react-reconciler/src/ReactInternalTypes.js

export type Fiber = {
  tag: WorkTag,
  key: null | string,
  elementType: any,
  type: any,
  stateNode: any,
  return: Fiber | null,
  child: Fiber | null,
  sibling: Fiber | null,
  index: number,
  ref:
    | null
    | (((handle: mixed) => void) & {_stringRef: ?string, ...})
    | RefObject,
  refCleanup: null | (() => void),
  pendingProps: any,
  memoizedProps: any,
  updateQueue: mixed,
  memoizedState: any,
  dependencies: Dependencies | null,
  mode: TypeOfMode,
  flags: Flags,
  subtreeFlags: Flags,
  deletions: Array<Fiber> | null,
  lanes: Lanes,
  childLanes: Lanes,
  alternate: Fiber | null,
  actualDuration?: number,
  actualStartTime?: number,
  selfBaseDuration?: number,
  treeBaseDuration?: number,
};

`tag`

WorkTag를 통해 렌더링 과정에서 Fiber를 어떻게 처리할지 결정합니다.

`key`

Root에서 WorkinProgress, current 간 동일 요소를 판별하는데 사용됩니다.

`elementType`

ReactSymbols 값으로 구분됩니다.

`type`

컴포넌트나 요소의 유형을 나타냅니다. (React Component, Custom Component, HTML element 등)

`stateNode`

Profiler
OffscreenComponent
LegacyHiddenComponent
TracingMarkerComponent
DehydratedFragment
ReactPortal
ClassComponent
HostHoistable

관련 값을 가지며 DOM 접근 정보나 Class component의 this 값을 참조하는데에 주로 쓰입니다.

`return`

부모 Fiber를 참조합니다.

`child`

첫 번째 자식 Fiber를 참조합니다.

`sibling`

다음 형제 Fiber를 참조합니다.

`index`

형제들 중 현재 Fiber 위치입니다.

`ref`

DOM 요소에 대한 참조 정보를 저장합니다.

`pendingProps`

컴포넌트에 전달될 예정인 props입니다.

`memoizedProps`

이전 렌더링에 사용된 props입니다.

`updateQueue`

상태 업데이트와 콜백을 저장하는 큐입니다.

`memoizedState`

현재 렌더링에 사용된 상태입니다.

`dependencies`

컨텍스트, 이벤트 관련 종속성입니다.

`mode`

렌더링 모드 제어 관련 정보입니다.

export const NoMode = /*                         */ 0b0000000;
export const ConcurrentMode = /*                 */ 0b0000001;
export const ProfileMode = /*                    */ 0b0000010;
export const DebugTracingMode = /*               */ 0b0000100;
export const StrictLegacyMode = /*               */ 0b0001000;
export const StrictEffectsMode = /*              */ 0b0010000;
export const NoStrictPassiveEffectsMode = /*     */ 0b1000000;

`flags`

어떤 작업을 수행해야 하는지 여부와 그 작업의 특성을 정의합니다.

`subtreeFlags`

자식 Fiber가 어떤 작업을 수행해야 하는지 여부와 그 작업의 특성을 정의합니다.

`deletions`

제거해야할 자식 Fiber 배열입니다.

`lanes`

작업 우선순위를 정의합니다.

`childLanes`

자식 Fiber의 작업 우선순위를 정의합니다.

`alternate`

current 기준 WorkinProgress에서 동일한 Fiber 참조입니다.

`actualDuration`

Fiber의 모든 자식들을 렌더링하는데 걸린 시간입니다. enableProfilerTimer 플래그가 활성화되어 있을 때만 설정됩니다.

`actualStartTime`

렌더링을 시작한 시간입니다. enableProfilerTimer 플래그가 활성화되어 있을 때만 설정됩니다.

`selfBaseDuration`

Fiber의 가장 최근 렌더링 시간의 지속 시간입니다. 메모이제이션을 위한 최적화가 발생할 때는 이 값이 업데이트되지 않으며 enableProfilerTimer 플래그가 활성화되어 있을 때만 설정됩니다.

`treeBaseDuration`

Fiber의 모든 자식들의 기본 렌더링 시간의 합입니다. enableProfilerTimer 플래그가 활성화되어 있을 때만 설정됩니다.

FiberRoot FiberFlags