Deep React

별도의 Gitbook으로 옮길예정

I. shallow equal 코드

// reference : https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react 

// https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js#L39-L67
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

1. 같은 object인지 확인한다.

2. object가 아닌지 확인

3. 가지고 있는 key의 갯수가 같은지 확인

4. A가 가진 key를 가진지 체크, 같은 같은 property인지 체크

---

II. React 달라진점

• React 17 (Naver D2)

  • 이벤트 위임 방식 변경

  • JSX Transform

  • Event Pooling 제거

  • Native Component Stacks

• React 18 (React blog)

  • Batch - https://github.com/reactwg/react-18/discussions/21

  • startTransition - https://github.com/reactwg/react-18/discussions/41