React Hooks 흐름: 심층 분석

많은 개발자가 React를 알고 있지만 이해가 부족하면 작동 방식에 대한 가정으로 이어질 수 있습니다. React의 후크 흐름을 명확하게 이해하면 코드 품질을 크게 향상시킬 수 있습니다. 4년 넘게 React를 사용하면서 종종 간과되기 쉬운 개념인 React Hooks의 흐름에 대한 몇 가지 주요 통찰력을 공유하고 싶습니다.

훅 흐름에 대해 알아보기 전에 후크 규칙을 다시 살펴보고 싶습니다

1. 최상위 수준에서만 Hooks를 호출하세요
루프, 조건 또는 중첩 내부에서 Hook을 호출하지 마세요
대신 항상
의 최상위 수준에서 Hooks를 사용하세요. 조기 반환 전 반응 기능

2. React 함수(Component 또는 Custom Hook)에서만 Hook을 호출하세요
일반 JavaScript 함수에서 Hooks를 호출하지 마세요.

React Hooks 흐름

이 React 후크 흐름 다이어그램은 구성 요소 수명 주기의 여러 단계에서 후크가 호출되는 순서를 시각화하는 데 도움이 됩니다.

구성요소 수명주기의 각 단계를 살펴보겠습니다.

초기 마운트
화면에 처음으로 구성요소가 로드되는 경우입니다.

지연 초기화 실행
React에서 상태 초기화는 구성 요소의 수명 주기 전체에서 한 번만 발생합니다.

'초기화'란 useState의 초기 값이 변수에 한 번만 할당된다는 의미입니다.

이는 매우 정상적인 현상이며 일반적으로 문제가 되지 않습니다. 그러나 초기화에 로컬 저장소에서 상태를 설정하는 등 복잡한 계산이 포함되는 경우에는 더욱 중요해집니다.

const [userList, setUserList] = useState(localStorage.getItem("usersList"))

현재 localStorage.getItem("usersList")는 다시 렌더링될 때마다 실행되지만 그 결과는 상태 변수에 할당되지 않습니다. 이렇게 반복적으로 평가하면 성능 문제가 발생할 수 있습니다. 이를 방지하려면 마운트 단계에서 한 번만 실행되는 콜백 함수를 useState에 전달할 수 있습니다.

const [userList, setUserList] = useState(() => localStorage.getItem("usersList"))

이를 상태의 지연 초기화라고 합니다. 자세한 내용은 여기를 참조하세요

지연 초기화는 다시 렌더링할 때마다 불필요한 초기화 논리가 실행되는 것을 방지하는 데 도움이 됩니다.

참고: 상태 초기화와 관련된 계산이 있는 경우에만 초기화 함수를 사용하세요.

렌더링
이 단계에서 React는 함수(구성 요소)를 호출하여 해당 구성 요소의 가상 DOM 표현을 생성합니다. 이 프로세스는 구성 요소가 화면에서 사용자에게 표시된다는 것을 직접적으로 의미하지는 않습니다. 대신, UI가 어떤 모습이어야 하는지 설명하는 가상 DOM 객체를 생성하는 React가 필요합니다.

다음은 가상 DOM(VDOM) 개체의 예입니다.

const [userList, setUserList] = useState(localStorage.getItem("usersList"))

VDOM 객체
{
$$typeof: 기호(react.element),
키: null,
소품: {어린이: 'Hello World!'},
참조: null,
유형: "h1" ,
.....
};

React 업데이트 DOM
가상 DOM을 생성하고 이를 조정하여 최종 가상 DOM을 얻은 후 React는 그에 따라 실제 DOM을 업데이트합니다.

LayoutEffect 실행
이 단계에는 useEffect와 유사하지만 브라우저가 페인팅을 수행하기 전에 실행되는 useLayoutEffect 후크 실행이 포함됩니다. 자세한 내용은 여기를 참조하세요

브라우저 페인트 화면
브라우저는 화면에 DOM을 그립니다

실행 효과
이것은 useEffect 후크가 실행되는 단계입니다. 즉, 브라우저에서 UI를 렌더링한 후입니다

useEffect에 상태 업데이트가 있는 경우 구성 요소의 업데이트 수명 주기가 트리거됩니다

업데이트
상태 업데이트가 트리거되면 구성 요소의 업데이트 수명 주기가 트리거됩니다

렌더링, React 업데이트 DOM
이 단계는 장착 단계와 유사합니다

레이아웃 효과 정리
가상 DOM(VDOM)을 생성하고 실제 DOM을 업데이트한 후 React는 useLayoutEffect 후크에 대한 정리 기능을 실행합니다.

참고: useLayoutEffect의 종속성이 변경되지 않은 경우 정리 기능이 실행되지 않습니다.

LayoutEffect 실행
종속성 비교에서 변경 사항을 나타내는 false가 반환되면 useLayoutEffect가 다시 실행됩니다. 그렇지 않으면 그렇지 않습니다.

브라우저 페인트 화면
이 시점에서 브라우저는 업데이트된 DOM을 화면에 렌더링합니다.

정리 효과, 실행 효과
useEffect 정리 및 실행은 이전 렌더링과 비교하여 종속성이 변경된 경우에만 발생합니다. 종속성이 변경되지 않은 경우 정리 기능이나 효과가 실행되지 않습니다.

마운트 해제
이는 구성 요소 수명 주기의 마지막 단계로, 구성 요소가 DOM에서 제거되어 더 이상 사용자에게 표시되지 않습니다.

정리 레이아웃 효과, 정리 효과
DOM에서 구성 요소를 제거하기 전에 React는 useLayoutEffect 및 useEffect 후크 모두에 대한 모든 정리 기능을 실행합니다.

다음 번에 UI에서 버그가 발생하면 후크 흐름을 시각화하여 코드에서 올바른 지점을 찾아 문제를 조사하고 해결하세요. 여러분의 코딩 실력 향상에 도움이 되기를 바랍니다. 즐거운 코딩하세요!

위 내용은 React Hooks 흐름: 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!