지연 로딩 및 메모 | 리액트JS | 1부

ReactJS의 맥락에서 지연 로딩과 메모이제이션을 정의, 사용 사례, 예시와 비교:

---

지연 로딩

정의

React의 지연 로딩은 초기 페이지 로드 시가 아닌 필요할 때만 구성 요소나 리소스를 로드하는 방식을 의미합니다. 이렇게 하면 초기 로드 시간이 줄어들고 성능이 향상됩니다.

핵심사항

목표: 초기 번들 크기를 줄이고 성능을 최적화합니다.

사용되는 경우: 즉시 필요하지 않은 구성요소 또는 자산(예: 숨겨진 탭의 모달 또는 이미지)에 사용됩니다.

React 기능: React.lazy 및 Suspense를 사용하여 구현됩니다.

예: 구성요소 지연 로딩

'react'에서 React, { Suspense } 가져오기;

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

const 앱 = () => {
복귀(

내 앱에 오신 것을 환영합니다

로드 중...}>



);
};

기본 앱 내보내기

동작: HeavyComponent는 렌더링될 때만 로드됩니다.

---

메모

정의

React의 메모이제이션은 함수 또는 구성 요소 렌더링 결과를 캐시하여 불필요하게 다시 계산하거나 다시 렌더링하는 것을 방지하는 프로세스입니다. 중복 작업을 방지하여 성능 향상에 도움이 됩니다.

핵심사항

목표: 비용이 많이 드는 재계산이나 재렌더링을 피하세요.

사용하는 경우: 동일한 props를 반복적으로 수신하는 계산 비용이 많이 드는 함수 또는 구성 요소에 사용됩니다.

React 기능: useMemo, useCallback 및 React.memo를 사용하여 구현됩니다.

예: 구성요소 메모하기

'react'에서 React, { useMemo } 가져오기;

const ExpensiveCalculation = ({ 숫자 }) => {
const 계산 = (숫자) => {
console.log('계산 중...');
반환 번호 * 2; // 비용이 많이 드는 작업 시뮬레이션
};

const result = useMemo(() => 계산(숫자), [숫자]);

반환

결과: {result};
};

기본 ExpensiveCalculation 내보내기;

동작: 계산은 숫자 소품이 변경될 때만 실행되어 중복 계산을 방지합니다.

---

각각 언제 사용하나요?

지연 로딩:
애플리케이션에 필요할 때까지 연기할 수 있는 대규모 구성 요소나 리소스가 있는 경우에 사용하세요(예: 대시보드 그래프 또는 이미지가 많은 갤러리).

메모:
앱이 반복 계산을 수행하거나 props나 상태가 변경되지 않아 구성 요소를 불필요하게 다시 렌더링할 때 사용하세요.

위 내용은 지연 로딩 및 메모 | 리액트JS | 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!