React 렌더링에 대한 시각적 가이드 - 치트 시트

반응 구성 요소는 언제 다시 렌더링됩니까? 재렌더링의 원인은 무엇이며 불필요한 렌더링을 방지하는 방법은 무엇입니까? 다음은 이러한 질문을 할 때마다 참조할 수 있는 빠른 치트 시트입니다.

이 문서는 Visual Guide to React Rendering 시리즈의 목차 역할을 합니다. 치트 시트의 모든 섹션은 주제를 깊이 있게 탐구하는 가이드의 해당 장으로 연결됩니다.

표준 렌더링 및 메모

기본적으로 구성 요소의 상태가 변경되면 이 구성 요소와 모든 하위 요소가 다시 렌더링됩니다. 전체 하위 트리가 다시 렌더링되지 않도록 React 구성 요소를 memo로 래핑할 수 있습니다.



A Visual Guide To React Rendering - It Always Rerenders (Chapter 1)

기본 대 비 기본 소품

자바스크립트의 기본이 아닌 값은 참조로 비교됩니다.

{display: "flex"} === {display: "flex"} // false

메모화된 구성 요소에 소품을 전달할 때 이를 염두에 두십시오. 메모화된 구성 요소는 소품이 변경되면 다시 렌더링됩니다.



A Visual Guide To React Rendering - Props (Chapter 2)

useMemo를 사용한 안정적인 참조

useMemo 를 사용하여 기본이 아닌 값에 대한 참조를 유지할 수 있습니다. 다시 렌더링해도 변경되지 않습니다.



A Visual Guide To React Rendering - useMemo (Chapter 3)

useCallback을 사용한 안정적인 참조

useCallback를 사용하여 함수에 대한 참조를 보존할 수 있습니다.



A Visual Guide To React Rendering - useCallback (Chapter 4)

렌더링 및 컨텍스트

컨텍스트 제공자 바로 아래에 있는 구성 요소는 아마도 memo를 사용해야 합니다.



A Visual Guide To React Rendering - Context (Chapter 5)

렌더링 및 DOM

React 컴포넌트 렌더링은 DOM 업데이트를 의미하지 않습니다. React는 변경해야 하는 DOM 부분만 업데이트할 만큼 충분히 똑똑합니다.



A Visual Guide To React Rendering - DOM (Chapter 6)


alexsidorenko.com에 원래 게시됨

주제에 관한 기사:

A (Mostly) Complete Guide to React Rendering Behavior - 마크 에릭슨

Fix the slow render before you fix the re-render - 켄트 C. 도즈

Before You memo() - 댄 아브라모프