`의 자식에는 파이버 노드를 표시하는 이 두 가지 함수가 있습니다.
```typescript
function placeChild(
newFiber: Fiber,
lastPlacedIndex: number,
newIndex: number,
): number {
newFiber.index = newIndex;
if (!shouldTrackSideEffects) {
// During hydration, the useId algorithm needs to know which fibers are
// part of a list of children (arrays, iterators).
newFiber.flags |= Forked;
return lastPlacedIndex;
}
const current = newFiber.alternate;
if (current !== null) {
const oldIndex = current.index;
if (oldIndex < lastPlacedIndex) {
// This is a move. // ❗❗
newFiber.flags |= Placement; // ❗❗
return lastPlacedIndex;
} else {
// This item can stay in place.
return oldIndex;
}
} else {
// This is an insertion. // ❗❗
newFiber.flags |= Placement; // ❗❗
return lastPlacedIndex;
}
}
```
```typescript
function deleteChild(returnFiber: Fiber, childToDelete: Fiber): void {
if (!shouldTrackSideEffects) {
// Noop.
return;
}
const deletions = returnFiber.deletions;
if (deletions === null) {
returnFiber.deletions = [childToDelete];
returnFiber.flags |= ChildDeletion; // ❗❗ returnFiber.flags |= ChildDeletion
} else {
deletions.push(childToDelete);
}
}
```
삭제해야 하는 Fiber는 부모 Fiber의 배열에 임시로 저장됩니다. 이는 삭제 후 새 Fiber Tree에 더 이상 존재하지 않지만 "Commit" 단계에서 처리해야 하므로 어딘가에 저장해야 하기 때문에 저장이 필요합니다.
이제 `
가` 완성되었습니다.
[![](https://jser.dev/static/rerender/13.avif align="left")](https://jser.dev/static/rerender/13.avif)
다음 React는 `버튼`으로 이동합니다. 다시 말하지만, 스케줄이 작동하지 않는다고 생각했지만, prop이 `["click me-", "1"]` 에서 `["click me-", "2"]`로 변경되었기 때문에 React는 여전히 `updateHostComponent()` 를 사용하여 작동합니다.
HostText의 경우 프로퍼티가 문자열이므로 첫 번째 `"click me -"` 는 중단됩니다. 그리고 React는 `updateHostText()`로 텍스트를 조정하려고 시도합니다.
### 2.12 `updateHostText()`
```typescript
function updateHostText(current, workInProgress) {
if (current === null) {
tryToClaimNextHydratableInstance(workInProgress);
}
// Nothing to do here. This is terminal. We'll do the completion step
// immediately after.
return null;
}
```
다시 말하지만 이건 아무것도 안합니다, 왜냐하면 업데이트는 완료 단계인 `completeWork()` 에서 표시됩니다. 이는 [최초 마운트](https://ted-projects.com/react-internals-deep-dive-2#heading-36-reconcilechildren)에서도 설명 했습니다.
### 2.13 `completeWork()` 는 HostComponent의 업데이트를 표시하고 필요한 경우 DOM 노드를 생성합니다.
```typescript
function completeWork(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
): Fiber | null {
const newProps = workInProgress.pendingProps;
// Note: This intentionally doesn't check if we're hydrating because comparing
// to the current tree provider fiber is just as fast and less error-prone.
// Ideally we would have a special version of the work loop only
// for hydration.
popTreeContext(workInProgress);
switch (workInProgress.tag) {
case IndeterminateComponent:
case LazyComponent:
case SimpleMemoComponent:
case FunctionComponent:
case ForwardRef:
case Fragment:
case Mode:
case Profiler:
case ContextConsumer:
case MemoComponent:
bubbleProperties(workInProgress);
return null;
case HostComponent: {
popHostContext(workInProgress);
const rootContainerInstance = getRootHostContainer();
const type = workInProgress.type;
if (current !== null && workInProgress.stateNode != null) {
// ❗❗ ↗ 이게 우리가 진행하고 있는 업데이트 브랜치입니다.
updateHostComponent(
current,
workInProgress,
type,
newProps,
rootContainerInstance,
);
if (current.ref !== workInProgress.ref) {
markRef(workInProgress);
}
} else {
// ❗❗ 이건 이전에 EP에서 했던 최초 마운트 브랜치입니다.
...
}
bubbleProperties(workInProgress);
return null;
}
case HostText: {
const newText = newProps;
if (current && workInProgress.stateNode != null) {
// ❗❗ ↗ 이게 우리가 진행하고 있는 업데이트 브랜치입니다.
const oldText = current.memoizedProps;
// If we have an alternate, that means this is an update and we need
// to schedule a side-effect to do the updates.
updateHostText(current, workInProgress, oldText, newText);
} else {
// ❗❗ 이건 이전에 EP에서 했던 최초 마운트 브랜치입니다.
...
if (wasHydrated) {
if (prepareToHydrateHostTextInstance(workInProgress)) {
markUpdate(workInProgress);
}
} else {
workInProgress.stateNode = createTextInstance(
newText,
rootContainerInstance,
currentHostContext,
workInProgress,
);
}
}
bubbleProperties(workInProgress);
return null;
}
...
}
}
```
```typescript
updateHostText = function(
// ❗❗ 이 것은 complete 단계에 있는 다른 updateHostText() 입니다.
current: Fiber,
workInProgress: Fiber,
oldText: string,
newText: string,
) {
// If the text differs, mark it as an update. All the work in done in commitWork.
if (oldText !== newText) {
markUpdate(workInProgress); // ❗❗ markUpdate
}
};
updateHostComponent = function(
current: Fiber,
workInProgress: Fiber,
type: Type,
newProps: Props,
rootContainerInstance: Container,
) {
// If we have an alternate, that means this is an update and we need to
// schedule a side-effect to do the updates.
const oldProps = current.memoizedProps;
if (oldProps === newProps) {
// In mutation mode, this is sufficient for a bailout because
// we won't touch this node even if children changed.
return;
}
// If we get updated because one of our children updated, we don't
// have newProps so we'll have to reuse them.
// TODO: Split the update API as separate for the props vs. children.
// Even better would be if children weren't special cased at all tho.
const instance: Instance = workInProgress.stateNode;
const currentHostContext = getHostContext();
// TODO: Experiencing an error where oldProps is null. Suggests a host
// component is hitting the resume path. Figure out why. Possibly
// related to `hidden`.
const updatePayload = prepareUpdate(
instance,
type,
oldProps,
newProps,
rootContainerInstance,
currentHostContext,
);
// TODO: Type this specific to this type of component.
workInProgress.updateQueue = (updatePayload: any);
// ❗❗ ↗ 업데이트는 업데이트 큐에 저장됩니다.
// ❗❗ 실제로 이펙트 훅과 같은 훅에서에서 사용됩니다.
// If the update payload indicates that there is a change or if there
// is a new ref we mark this as an update. All the work is done in commitWork.
if (updatePayload) {
markUpdate(workInProgress); // ❗❗ markUpdate
}
};
function markUpdate(workInProgress: Fiber) {
// Tag the fiber with an update effect. This turns a Placement into
// a PlacementAndUpdate.
workInProgress.flags |= Update;
// ❗❗ ↗↗ 맞습니다, 또다른 플래그입니다!
}
```
렌더링 단계가 끝나면 다음과 같은 결과가 나타납니다.
1. `b`에 삽입(Insertion)
2. `span`에서 삭제(Deletion)
3. HostText의 업데이트
4. `button` 의 업데이트(후드 아래 비어 있음)
한 가지 강조하고 싶은 것은 `button`과 그 부모 `div` 모두에 대해 `prepareUpdate()` 가 실행되지만, `div`에 대해서는 `null`을 생성하지만 `button`에 대해서는 `[]` 을 생성한다는 점입니다. 여기서는 다루지 않을 까다로운 에지 케이스입니다.
[![](https://jser.dev/static/rerender/25.avif align="left")](https://jser.dev/static/rerender/25.avif)
이제 커밋 단계에서 이러한 업데이트를 커밋할 차례입니다.
## 3\. Re-render: Commit Phase
### 3.1 `commitMutationEffectsOnFiber()` 는 Insertion/Deletion/Update의 커밋을 시작합니다.
```typescript
function commitMutationEffectsOnFiber(
finishedWork: Fiber,
root: FiberRoot,
lanes: Lanes,
) {
const current = finishedWork.alternate;
const flags = finishedWork.flags;
// The effect flag should be checked *after* we refine the type of fiber,
// because the fiber tag is more specific. An exception is any flag related
// to reconciliation, because those can be set on all fiber types.
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
case MemoComponent:
case SimpleMemoComponent: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
// ❗❗ ↖ 재귀적으로 자식들을 먼저 처리합니다
commitReconciliationEffects(finishedWork);
// ❗❗ ↖ 그리고 나서 삽입(Insertion)을 처리합니다.
if (flags & Update) {
// ❗❗ ↖ 업데이트를 마지막에 처리합니다.
try {
commitHookEffectListUnmount(
HookInsertion | HookHasEffect,
finishedWork,
finishedWork.return,
);
commitHookEffectListMount(
HookInsertion | HookHasEffect,
finishedWork,
);
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
...
}
return;
}
case HostComponent: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
// ❗❗ ↖ 재귀적으로 자식들을 먼저 처리합니다
commitReconciliationEffects(finishedWork);
// ❗❗ ↖ 그리고 나서 삽입(Insertion)을 처리합니다.
if (supportsMutation) {
// TODO: ContentReset gets cleared by the children during the commit
// phase. This is a refactor hazard because it means we must read
// flags the flags after `commitReconciliationEffects` has already run;
// the order matters. We should refactor so that ContentReset does not
// rely on mutating the flag during commit. Like by setting a flag
// during the render phase instead.
if (finishedWork.flags & ContentReset) {
const instance: Instance = finishedWork.stateNode;
try {
resetTextContent(instance);
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
}
if (flags & Update) {
// ❗❗ ↖ 업데이트를 마지막에 처리합니다.
const instance: Instance = finishedWork.stateNode;
if (instance != null) {
// Commit the work prepared earlier.
const newProps = finishedWork.memoizedProps;
// For hydration we reuse the update path but we treat the oldProps
// as the newProps. The updatePayload will contain the real change in
// this case.
const oldProps =
current !== null ? current.memoizedProps : newProps;
const type = finishedWork.type;
// TODO: Type the updateQueue to be specific to host components.
const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
finishedWork.updateQueue = null;
if (updatePayload !== null) {
try {
commitUpdate(
// ❗❗ ↖ HostComponent의 경우, props만 업데이트 처리합니다.
instance,
updatePayload,
type,
oldProps,
newProps,
finishedWork,
);
} catch (error) {
captureCommitPhaseError(
finishedWork,
finishedWork.return,
error,
);
}
}
}
}
}
return;
}
case HostText: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork);
if (flags & Update) {
if (supportsMutation) {
if (finishedWork.stateNode === null) {
throw new Error(
'This should have a text node initialized. This error is likely ' +
'caused by a bug in React. Please file an issue.',
);
}
const textInstance: TextInstance = finishedWork.stateNode;
const newText: string = finishedWork.memoizedProps;
// For hydration we reuse the update path but we treat the oldProps
// as the newProps. The updatePayload will contain the real change in
// this case.
const oldText: string =
current !== null ? current.memoizedProps : newText;
try {
commitTextUpdate(textInstance, oldText, newText);
// ❗❗ ↖ HostText를 위해, textContent만 업데이트합니다.
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
}
}
return;
}
}
}
```
우리는 이것이 재귀적 프로세스임을 알 수 있으며 각 변형(mutation) 유형을 자세히 살펴 보겠습니다.
### 3.2 삭제가 먼저 처리된 후, 자식 및 self를 처리합니다.
```typescript
function recursivelyTraverseMutationEffects(
root: FiberRoot,
parentFiber: Fiber,
lanes: Lanes,
) {
// Deletions effects can be scheduled on any fiber type. They need to happen
// before the children effects hae fired.
const deletions = parentFiber.deletions; // ❗❗
if (deletions !== null) {
for (let i = 0; i < deletions.length; i++) {
const childToDelete = deletions[i];
try {
commitDeletionEffects(root, parentFiber, childToDelete); // ❗❗ commitDeletionEffects
} catch (error) {
captureCommitPhaseError(childToDelete, parentFiber, error);
}
}
}
const prevDebugFiber = getCurrentDebugFiberInDEV();
if (parentFiber.subtreeFlags & MutationMask) {
let child = parentFiber.child;
while (child !== null) {
setCurrentDebugFiberInDEV(child);
commitMutationEffectsOnFiber(child, root, lanes); // ❗❗ commitMutationEffectsOnFiber
child = child.sibling;
}
}
setCurrentDebugFiberInDEV(prevDebugFiber);
}
```
자식을 처리하기 전임에도, 삭제는 우선적으로 처리됩니다.
```typescript
function commitDeletionEffects(
root: FiberRoot,
returnFiber: Fiber,
deletedFiber: Fiber,
) {
if (supportsMutation) {
// We only have the top Fiber that was deleted but we need to recurse down its
// children to find all the terminal nodes.
// Recursively delete all host nodes from the parent, detach refs, clean
// up mounted layout effects, and call componentWillUnmount.
// We only need to remove the topmost host child in each branch. But then we
// still need to keep traversing to unmount effects, refs, and cWU. TODO: We
// could split this into two separate traversals functions, where the second
// one doesn't include any removeChild logic. This is maybe the same
// function as "disappearLayoutEffects" (or whatever that turns into after
// the layout phase is refactored to use recursion).
// Before starting, find the nearest host parent on the stack so we know
// which instance/container to remove the children from.
// TODO: Instead of searching up the fiber return path on every deletion, we
// can track the nearest host component on the JS stack as we traverse the
// tree during the commit phase. This would make insertions faster, too.
let parent = returnFiber;
findParent: while (parent !== null) {
// ❗❗ ↖ 부모 노드가 반드시 백업 DOM을 가지고 있다는 것을 의미하지 않으므로
// ❗❗ 여기서는 백업 DOM을 가진 가장 가까운 Fiber Node를 검색합니다.
switch (parent.tag) {
case HostComponent: {
hostParent = parent.stateNode;
hostParentIsContainer = false;
break findParent;
}
case HostRoot: {
hostParent = parent.stateNode.containerInfo;
hostParentIsContainer = true;
break findParent;
}
case HostPortal: {
hostParent = parent.stateNode.containerInfo;
hostParentIsContainer = true;
break findParent;
}
}
parent = parent.return;
}
if (hostParent === null) {
throw new Error(
'Expected to find a host parent. This error is likely caused by ' +
'a bug in React. Please file an issue.',
);
}
commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber); // ❗❗ commitDeletionEffectsOnFiber
hostParent = null;
hostParentIsContainer = false;
} else {
// Detach refs and call componentWillUnmount() on the whole subtree.
commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber); // ❗❗commitDeletionEffectsOnFiber
}
detachFiberMutation(deletedFiber);
}
```
```typescript
function commitDeletionEffectsOnFiber(
finishedRoot: FiberRoot,
nearestMountedAncestor: Fiber,
deletedFiber: Fiber,
) {
onCommitUnmount(deletedFiber);
// The cases in this outer switch modify the stack before they traverse
// into their subtree. There are simpler cases in the inner switch
// that don't modify the stack.
switch (deletedFiber.tag) {
case HostComponent: {
if (!offscreenSubtreeWasHidden) {
safelyDetachRef(deletedFiber, nearestMountedAncestor);
}
// Intentional fallthrough to next branch
}
// eslint-disable-next-line-no-fallthrough
case HostText: {
// We only need to remove the nearest host child. Set the host parent
// to `null` on the stack to indicate that nested children don't
// need to be removed.
if (supportsMutation) {
const prevHostParent = hostParent;
const prevHostParentIsContainer = hostParentIsContainer;
hostParent = null;
recursivelyTraverseDeletionEffects(
finishedRoot,
nearestMountedAncestor,
deletedFiber,
);
hostParent = prevHostParent;
hostParentIsContainer = prevHostParentIsContainer;
if (hostParent !== null) {
// Now that all the child effects have unmounted, we can remove the
// node from the tree.
if (hostParentIsContainer) {
removeChildFromContainer( // ❗❗ removeChildFromContainer
((hostParent: any): Container),
// ❗❗ ↗ 여기의 hostParent는 이전 while 루프에서 재시도됩니다.
(deletedFiber.stateNode: Instance | TextInstance),
);
} else {
removeChild( // ❗❗ removeChild
((hostParent: any): Instance),
(deletedFiber.stateNode: Instance | TextInstance),
);
}
}
} else {
recursivelyTraverseDeletionEffects(
finishedRoot,
nearestMountedAncestor,
deletedFiber,
);
}
return;
}
...
default: {
recursivelyTraverseDeletionEffects(
finishedRoot,
nearestMountedAncestor,
deletedFiber,
);
return;
}
}
}
```
[![](https://jser.dev/static/rerender/26.avif align="left")](https://jser.dev/static/rerender/26.avif)
### 3.3 삽입은 다음으로 처리됩니다.
이는 새로 생성된 노드를 트리 구조로 설정할 수 있도록 하기 위한 것입니다.
```typescript
function commitReconciliationEffects(finishedWork: Fiber) {
// Placement effects (insertions, reorders) can be scheduled on any fiber
// type. They needs to happen after the children effects have fired, but
// before the effects on this fiber have fired.
const flags = finishedWork.flags;
if (flags & Placement) {
try {
commitPlacement(finishedWork); // ❗❗ commitPlacement
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
// Clear the "placement" from effect tag so that we know that this is
// inserted, before any life-cycles like componentDidMount gets called.
// TODO: findDOMNode doesn't rely on this any more but isMounted does
// and isMounted is deprecated anyway so we should be able to kill this.
finishedWork.flags &= ~Placement;
}
if (flags & Hydrating) {
finishedWork.flags &= ~Hydrating;
}
}
function commitPlacement(finishedWork: Fiber): void {
if (!supportsMutation) {
return;
}
// Recursively insert all host nodes into the parent.
const parentFiber = getHostParentFiber(finishedWork);
// Note: these two variables *must* always be updated together.
switch (parentFiber.tag) {
case HostComponent: {
const parent: Instance = parentFiber.stateNode;
if (parentFiber.flags & ContentReset) {
// Reset the text content of the parent before doing any insertions
resetTextContent(parent);
// Clear ContentReset from the effect tag
parentFiber.flags &= ~ContentReset;
}
const before = getHostSibling(finishedWork);
// ❗❗ ↗ 여기가 중요합니다. Node.insertBefore()는 형제자매 노드들이 필요합니다.
// ❗❗ 만약 우리가 찾을 수 없으면, 그 땐 끝에 추가해줍니다.
// We only have the top Fiber that was inserted but we need to recurse down its
// children to find all the terminal nodes.
insertOrAppendPlacementNode(finishedWork, before, parent); // ❗❗ insertOrAppendPlacementNode
break;
}
case HostRoot:
case HostPortal: {
const parent: Container = parentFiber.stateNode.containerInfo;
const before = getHostSibling(finishedWork);
insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
break;
}
// eslint-disable-next-line-no-fallthrough
default:
throw new Error(
'Invalid host parent fiber. This error is likely caused by a bug ' +
'in React. Please file an issue.',
);
}
}
function insertOrAppendPlacementNodeIntoContainer(
node: Fiber,
before: ?Instance,
parent: Container,
): void {
const {tag} = node;
const isHost = tag === HostComponent || tag === HostText;
if (isHost) {
const stateNode = node.stateNode;
if (before) {
insertInContainerBefore(parent, stateNode, before);
} else {
appendChildToContainer(parent, stateNode);
}
} else if (tag === HostPortal) {
// If the insertion itself is a portal, then we don't want to traverse
// down its children. Instead, we'll get insertions from each child in
// the portal directly.
} else {
const child = node.child;
if (child !== null) {
insertOrAppendPlacementNodeIntoContainer(child, before, parent);
let sibling = child.sibling;
while (sibling !== null) {
insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);
sibling = sibling.sibling;
}
}
}
}
function insertOrAppendPlacementNode(
node: Fiber,
before: ?Instance,
parent: Instance,
): void {
const {tag} = node;
const isHost = tag === HostComponent || tag === HostText;
if (isHost) {
const stateNode = node.stateNode;
if (before) {
insertBefore(parent, stateNode, before);
} else {
appendChild(parent, stateNode);
}
} else if (tag === HostPortal) {
// If the insertion itself is a portal, then we don't want to traverse
// down its children. Instead, we'll get insertions from each child in
// the portal directly.
} else {
const child = node.child;
if (child !== null) {
insertOrAppendPlacementNode(child, before, parent);
let sibling = child.sibling;
while (sibling !== null) {
insertOrAppendPlacementNode(sibling, before, parent);
sibling = sibling.sibling;
}
}
}
}
```
[![](https://jser.dev/static/rerender/30.avif align="left")](https://jser.dev/static/rerender/30.avif)
### 3.4 업데이트는 마지막에 처리됩니다.
업데이트 브랜치는 `commitMutationEffectsOnFiber(`) 안에 있습니다.
```typescript
function commitMutationEffectsOnFiber(
finishedWork: Fiber,
root: FiberRoot,
lanes: Lanes,
) {
const current = finishedWork.alternate;
const flags = finishedWork.flags;
// The effect flag should be checked *after* we refine the type of fiber,
// because the fiber tag is more specific. An exception is any flag related
// to reconciliation, because those can be set on all fiber types.
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
case MemoComponent:
case SimpleMemoComponent: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork);
if (flags & Update) {
// ❗❗ ↖ FunctionComponent일 경우, 이것은 훅을 실행해야 되는 것을 의미합니다.
try {
commitHookEffectListUnmount(
HookInsertion | HookHasEffect,
finishedWork,
finishedWork.return,
);
commitHookEffectListMount(
HookInsertion | HookHasEffect,
finishedWork,
);
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
// Layout effects are destroyed during the mutation phase so that all
// destroy functions for all fibers are called before any create functions.
// This prevents sibling component effects from interfering with each other,
// e.g. a destroy function in one component should never override a ref set
// by a create function in another component during the same commit.
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
) {
try {
startLayoutEffectTimer();
commitHookEffectListUnmount(
HookLayout | HookHasEffect,
finishedWork,
finishedWork.return,
);
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
recordLayoutEffectDuration(finishedWork);
} else {
try {
commitHookEffectListUnmount(
HookLayout | HookHasEffect,
finishedWork,
finishedWork.return,
);
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
}
}
return;
}
case HostComponent: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork);
if (flags & Ref) {
if (current !== null) {
safelyDetachRef(current, current.return);
}
}
if (supportsMutation) {
// TODO: ContentReset gets cleared by the children during the commit
// phase. This is a refactor hazard because it means we must read
// flags the flags after `commitReconciliationEffects` has already run;
// the order matters. We should refactor so that ContentReset does not
// rely on mutating the flag during commit. Like by setting a flag
// during the render phase instead.
if (finishedWork.flags & ContentReset) {
const instance: Instance = finishedWork.stateNode;
try {
resetTextContent(instance);
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
}
if (flags & Update) {
// ❗❗ ↗ HostComponent의 경우, 이것은 엘리먼트 어트리뷰트가 업데이트 되야 함을 의미합니다.
const instance: Instance = finishedWork.stateNode;
if (instance != null) {
// Commit the work prepared earlier.
const newProps = finishedWork.memoizedProps;
// For hydration we reuse the update path but we treat the oldProps
// as the newProps. The updatePayload will contain the real change in
// this case.
const oldProps =
current !== null ? current.memoizedProps : newProps;
const type = finishedWork.type;
// TODO: Type the updateQueue to be specific to host components.
const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
finishedWork.updateQueue = null;
if (updatePayload !== null) {
try {
commitUpdate( // ❗❗ commitUpdate
instance,
updatePayload,
type,
oldProps,
newProps,
finishedWork,
);
} catch (error) {
captureCommitPhaseError(
finishedWork,
finishedWork.return,
error,
);
}
}
}
}
}
return;
}
case HostText: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork);
if (flags & Update) { // ❗❗ if (flags & Update)
if (supportsMutation) {
if (finishedWork.stateNode === null) {
throw new Error(
'This should have a text node initialized. This error is likely ' +
'caused by a bug in React. Please file an issue.',
);
}
const textInstance: TextInstance = finishedWork.stateNode;
const newText: string = finishedWork.memoizedProps;
// For hydration we reuse the update path but we treat the oldProps
// as the newProps. The updatePayload will contain the real change in
// this case.
const oldText: string =
current !== null ? current.memoizedProps : newText;
try {
commitTextUpdate(textInstance, oldText, newText); // ❗❗ commitTextUpdate
} catch (error) {
captureCommitPhaseError(finishedWork, finishedWork.return, error);
}
}
}
return;
}
...
default: {
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork);
return;
}
}
}
```
```typescript
export function commitUpdate(
domElement: Instance,
updatePayload: Array,
type: string,
oldProps: Props,
newProps: Props,
internalInstanceHandle: Object,
): void {
// Apply the diff to the DOM node.
updateProperties(domElement, updatePayload, type, oldProps, newProps); // ❗❗ updateProperties
// Update the props handle so that we know which props are the ones with
// with current event handlers.
updateFiberProps(domElement, newProps);
}
export function commitTextUpdate(
textInstance: TextInstance,
oldText: string,
newText: string,
): void {
textInstance.nodeValue = newText;
}
```
데모에서는 트리 구조 때문에 변형(mutation)이 아래 순서대로 처리됩니다.
1. `span`에서 삭제
2. HostText 업데이트
3. `button`의 업데이트 (후드 아래 비어 있음)
4. `b` 삽입
## 4\. 요약
휴, 정말 많네요. 리-렌더링 프로세스를 대략적으로 요약하면 다음과 같습니다.
1. 상태가 변경되면 대상 Fiber Node의 경로가 `lanes` 및 `childLanes`으로 표시되어 해당 노드 또는 하위 트리를 리-렌더링해야 하는지 여부를 나타냅니다.
2. 불필요한 리-렌더링을 피하기 위해 bailout을 최적화하여 전체 Fiber Tree를 리-렌더링합니다.
3. 컴포넌트가 리-렌더링되면 새로운 React 엘리먼트가 생성되고, 그 자식들은 모두 동일하더라도 새로운 프로퍼티를 가지므로 React는 기본적으로 전체 Fiber Tree를 리-렌더링합니다. `useMemo()` 함수가 필요한 이유는 다음과 같습니다.
4. "리-렌더링"을 통해 React는 현재 트리에서 새로운 Fiber Tree를 생성하고, 필요한 경우 Fiber Node에 `PlacementChildDeletion` 및 `Update` 플래그를 표시합니다.
5. 새 Fiber Tree가 완료되면 React는 위의 플래그로 Fiber Node를 처리하고 "Commit" 단계에서 호스트 DOM에 변경 사항을 적용합니다.
6. 그러면 새 Fiber Tree가 현재 Fiber Tree를 가리키게 됩니다. 이전 Fiber Tree의 노드는 다음 렌더링에 재사용 할 수 있습니다.
아래 슬라이드에 단계를 정리해 두었으니 도움이 되길 바랍니다.
[JSer의 슬라이드 링크](https://jser.dev/2023-07-18-how-react-rerenders/#how-react-re-renders-internally)
원글 작성일: 2023-07-23