Component
React에서 모든 컴포넌트는 일반적으로 클래스나 함수로 정의됩니다. 이 컴포넌트들은 UI를 렌더링하고, 상태를 관리하며, 이벤트 핸들러를 처리합니다.
createRoot / hydrateRoot
createRoot와 hydrateRoot 모두 DEV에서 Internals.usingClientEntryPoint라는 플래그를 통해서 createRootImpl/hydrateRootImpl을 진행했습니다.
InteralTypes: {
usringClientEntryPoint: boolean,
Events: any[],
Dispatcher: { current: HostDispatcher } // preload, fetch etc
}
Java
복사
둘의 차이점
1.
hydrationCallbacks 이거를 하이드레이션에선 저장하고있네요.
2.
createNode에선 COMMENT_NODE를 허용하지만 hydration에선 비허용
FiberRoot가 있다. Lanes라는걸 만들구
업데이트 트래킹이있다. Set을썻네? pendingUpdatersLaneMap.push(new Set());
캐쉬를 만드는데 abortController라 해서 이벤트들을 담고 실행시키는 컨트롤러가있다.
캐쉬를 초기화해주고나서, memoizedState에 초기화된 state를 넘어주고
// createContainer
const hydrate = false;
const initialChildren = null;
return createFiberRoot
//createFiberRoot
...
root.current = uninitializedFiber;
uninitializedFiber.stateNode = root;
...
const initialState: RootState = {
element: initialChildren,
isDehydrated: hydrate,
cache: (null: any), // not enabled yet
};
uninitializedFiber.memoizedState = initialState;
initializeUpdateQueue(uninitializedFiber); // first last BaseUpdate, callback
return root
Java
복사
// createHydrationContainer는 hydrate를 true로 그리고 initialChildren을 초기화하지 않음
const hydrate = true;
root = createFiberRoot
root.context = getContextForSubTree(null)
// getContextForSubtree
if (!parentComponent) {
return emptyContextObject;
}
return parentComponent._reactInternals // parentContext
// 이 아랜 오로지 hydratioin root를 위해서만 존재한다.
const current = root.current;
const lane = requestUpdateLane(current); // lane으로 뭔갈한다..
const update = createUpdate(lane); // lane tag를 updateState로
// 여기저기 루트라는 표식을 남긴다.
return root
dispatchEvent는 이벤틀르 줄지어 실행하는데, 중단된다면 중단된걸 저장해있다.
native이벤트들은 stoppropagation해버리고 지들이 이벤트를 실행해버린다.
버블링상황 캡처링상황 둘다 고려하면서하드라
addeventlisnter를 모든 이벤트타입으로다가 target에 넣어준다.
return new ReactDOMRoot(root)
this._internalRoot = internalRoot);
Java
복사
결론 : hydrateRoot 를 하면 root에 추가 옵션들을 붙인 객체인(FiberRootNode)로 만들고,
reactNode은 root.current.memoizedState.element로 들어간다.
// 자주 나오는 변수
ontainerInfo: root로 잡으려고 가져온 document.getElementById('root')
Java
복사
root.prototype.render가 있는데…
조건이 3개 있다.
render를 하면서 mergeLanes라는걸하는데 업데이트된레인의 동시성이다.
이건 어느 작업을 하고있는지 체크하는데 쓰인다.
,render()를 하고나면
root: {
fiber: {
updateQueue: {
shared:{
pending: {
// update
next: {
next: null,
payload: renderChild
}
}
}
}
}
}
이렇게 된다.
저게 queue가 생성된다.|
Java
복사
unmint는 node의 호스트루트를 날리고, 클래스의 __internal을 날린다.
UsingClientEntryPoint
UsingClientEntryPoint는 createRoot와 hydrateRoot를 사용하여 클라이언트사이드 렌더링을 구현하는 방법 중 하나입니다. 이 방법은 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 React 컴포넌트를 동기화합니다.
다음 내용은 예비적인 내용입니다.