Seonglae ChoReact Diffing Algorithm
render()함수는 리액트 엘리먼트 트리를 만들고, state나 props가 갱신되면 render()함수는 새로운 리액트 엘리먼트 트리를 반환
이 때 리액트는 방금 만들어진 트리에 맞게 가장 효과적으로 UI를 갱신하는 방법을 알아내야
리액트는 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현
- 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
- key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다
루트 엘리먼트부터 비교
이후의 동작은 루트 엘리먼트의 타입이 다르냐 같으냐에 따라
다른 경우는 완전히 새로운 트리를 구축
같은 타입일 경우에는, 두 엘리먼트의 속성을 확인하여 동일한 건 유지하고 변경된 속성들만 갱신
dependency 따져서
돔 노드의 처리가 끝나면, 이어서 해당 노드의 자식들을 재귀적으로 key 일치 확인
리렌더링은 해당 컴포넌트 아래 모든 컴포넌트의 렌더를 호출하는 것이지 리액트가 언마운트시키고 다시 마운트하는 것은 아니다
가정이 틀릴 경우 성능 저하 - 최적화의 기준임
이 비교 알고리즘 덕분에 컴포넌트의 갱신이 예측 가능해지면서도 고성능 앱이라고 불러도 손색없을 만큼 충분히 빠른 앱