React 톺아보기 - 05. Reconciler_4

  
function appendAllChildren(parent, workInProgress) {
  
  let node = workInProgress.child

  while (node !== null) {
    // 호스트 컴포넌트
    if (node.tag === HostComponent || node.tag === HostText) {
      appendInitialChild(parent, node.stateNode) // parent.appendChild(node.stateNode)
    // 이외 컴포넌트
    } else if (node.child !== null) {
      node.child.return = node
      // 호스트 컴포넌트를 찾기 위해 한 단계 밑으로 내려 간다.
      node = node.child
      continue
    }

    // 내려갔던 만큼 다시 위로 올라간다.
    while (node.sibling === null) {
      // 형제가 더이상 없고 부모가 workInProgress라면 모든 경로를 탐색하였음을 뜻함.
      if (node.return === null || node.return === workInProgress) {
        return
      }
      node = node.return
    }

    // 형제로 이동한다.
    node.sibling.return = node.return
    node = node.sibling
  }
}

  
function finalizeInitialChildren(
  domElement: Instance,
  type: string,
  props: Props, 
  rootContainerInstance: Container
): boolean {
  setInitialProperties(domElement, type, props, rootContainerInstance)
  return shouldAutoFocusHostComponent(type, props) // auto focus 여부
}

  
function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
  switch (type) {
    case 'button':
    case 'input':
    case 'select':
    case 'textarea':
      return !!props.autoFocus
  }
  return false
}

  
function markUpdate(workInProgress: Fiber) {
  workInProgress.effectTag |= Update;
}

    
function setInitialProperties(
  domElement: Element,
  tag: string,
  rawProps: Object,
  rootContainerElement: Element | Document
): void {
  let props: Object
  // 이벤트 바인딩
  switch (tag) {
    case 'img':
    case 'image':
    case 'link':
      trapBubbledEvent(TOP_ERROR, domElement)
      trapBubbledEvent(TOP_LOAD, domElement)
      props = rawProps
      break
    case 'form':
      trapBubbledEvent(TOP_RESET, domElement)
      trapBubbledEvent(TOP_SUBMIT, domElement)
      props = rawProps
      break
    case 'input':
      ReactDOMInputInitWrapperState(domElement, rawProps)
      props = ReactDOMInputGetHostProps(domElement, rawProps)
      trapBubbledEvent(TOP_INVALID, domElement)
      ensureListeningTo(rootContainerElement, 'onChange')
      break
    /*...*/
    default:
      props = rawProps
  }
  // attribute 추가
  setInitialDOMProperties(
    tag,
    domElement,
    rootContainerElement,
    props,
    isCustomComponentTag
  )
}

  
function completeWork(current, workInProgress, renderExpirationTime) {
  // const newProps = workInProgress.pendingProps
  switch (workInProgress.tag) {
    /*...*/
    case HostComponent: {
      // var rootContainerInstance = getRootHostContainer();
      // const type = workInProgress.type;
      if (current !== null && workInProgress.stateNode != null) {
        // element 업데이트
        updateHostComponent(
          current,
          workInProgress,
          type,
          newProps,
          rootContainerInstance,
        );
      } else {
        /*
        element 생성
        let instance = createInstance(...);
        appendAllChildren(instance, ...);
        ...
        */  
    }
    /*...*/
  }
}

  
function updateHostComponent(
  current: Fiber,
  workInProgress: Fiber,
  type: Type,
  newProps: Props,
  rootContainerInstance: Container
) {
  const oldProps = current.memoizedProps
  // 경로 최적화를 이용한 경우 변경된 부분이 없으므로
  if (oldProps === newProps) {
    return
  }

  const instance: Instance = workInProgress.stateNode
  const updatePayload = prepareUpdate(
    instance,
    type,
    oldProps,
    newProps,
    rootContainerInstance
  )
  workInProgress.updateQueue = updatePayload
  if (updatePayload) {
    markUpdate(workInProgress)
  }
}

  
function prepareUpdate(
  domElement: Instance,
  type: string,
  oldProps: Props,
  newProps: Props,
  rootContainerInstance: Container,
  hostContext: HostContext
): null | Array<mixed> {
  return diffProperties(
    domElement,
    type,
    oldProps,
    newProps,
    rootContainerInstance
  )
}

  
function diffProperties(
  domElement: Element,
  tag: string,
  lastRawProps: Object,
  nextRawProps: Object,
  rootContainerElement: Element | Document
): null | Array<mixed> {
  // 변경점을 담을 저장소로 [[key, value], ...]의 형태를 취함.
  let updatePayload: null | Array<any> = null

  let lastProps: Object
  let nextProps: Object

  // 기본 속성 추가
  switch (tag) {
    case 'input':
      lastProps = ReactDOMInputGetHostProps(domElement, lastRawProps)
      nextProps = ReactDOMInputGetHostProps(domElement, nextRawProps)
      updatePayload = []
      break
    // option, select, textarea...
  }

  let propKey
  let styleName
  let styleUpdates = null // style은 임시 변수를 두고 변경점을 추출하여 담아둔다.

  // 삭제
  for (propKey in lastProps) {
    if (
      nextProps.hasOwnProperty(propKey) || // workInProgress에 있다면 삭제가 아니다.
      !lastProps.hasOwnProperty(propKey) ||
      lastProps[propKey] == null
    ) {
      continue
    }
    // 이하 workInProgress에는 존재하지 않는 속성들이므로 모두 삭제해준다.
    if (propKey === STYLE) {
      const lastStyle = lastProps[propKey]
      for (styleName in lastStyle) {
        if (lastStyle.hasOwnProperty(styleName)) {
          if (!styleUpdates) {
            styleUpdates = {}
          }
          styleUpdates[styleName] = ''
        }
      }
    } else {
      (updatePayload = updatePayload || []).push(propKey, null)
    }
  }

  // 추가, 수정
  for (propKey in nextProps) {
    const nextProp = nextProps[propKey]
    const lastProp = lastProps != null ? lastProps[propKey] : undefined
    if (
      !nextProps.hasOwnProperty(propKey) ||
      nextProp === lastProp ||
      (nextProp == null && lastProp == null)
    ) {
      continue
    }

    if (propKey === STYLE) {
      // style은 추가, 수정, 삭제가 동시에 일어날 수 있음.
      // current에만 존재하면 삭제하면 그만이지만 그렇지 않을 경우 모든 케이스에 대한 처리가 필요함.

      // 추가, 삭제, 수정
      if (lastProp) {
        for (styleName in lastProp) {
          // 삭제
          if (
            lastProp.hasOwnProperty(styleName) &&
            (!nextProp || !nextProp.hasOwnProperty(styleName))
          ) {
            if (!styleUpdates) {
              styleUpdates = {}
            }
            styleUpdates[styleName] = ''
          }
        }
        // 추가, 수정
        for (styleName in nextProp) {
          if (
            nextProp.hasOwnProperty(styleName) &&
            lastProp[styleName] !== nextProp[styleName]
          ) {
            if (!styleUpdates) {
              styleUpdates = {}
            }
            styleUpdates[styleName] = nextProp[styleName]
          }
        }
        // 추가
      } else {
        if (!styleUpdates) {
          if (!updatePayload) {
            updatePayload = []
          }
          updatePayload.push(propKey, styleUpdates)
        }
        styleUpdates = nextProp
      }
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
      const nextHtml = nextProp ? nextProp[HTML] : undefined
      const lastHtml = lastProp ? lastProp[HTML] : undefined
      if (nextHtml != null) {
        if (lastHtml !== nextHtml) {
          (updatePayload = updatePayload || []).push(
            propKey,
            toStringOrTrustedType(nextHtml) // return '' + nextHtml
          )
        }
      }
    } else if (propKey === CHILDREN) {
      if (
        lastProp !== nextProp &&
        (typeof nextProp === 'string' || typeof nextProp === 'number')
      ) {
        (updatePayload = updatePayload || []).push(propKey, '' + nextProp)
      }
    } else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp != null) {
        ensureListeningTo(rootContainerElement, propKey)
      }
      if (!updatePayload && lastProp !== nextProp) {
        updatePayload = []
      }
    } else {
      (updatePayload = updatePayload || []).push(propKey, nextProp)
    }
  }

  // style 변경점을 가지고 있는 styleUpdates를 마지막으로 추가하면서 마무리한다.
  if (styleUpdates) {
    (updatePayload = updatePayload || []).push(STYLE, styleUpdates)
  }
  return updatePayload
}

function workLoopSync() {
  while (workInProgress !== null) {
    workInProgress = performUnitOfWork(workInProgress)
  }
}