> 웹 프론트엔드 > JS 튜토리얼 > React 메모화 치트 시트

React 메모화 치트 시트

Mary-Kate Olsen
풀어 주다: 2024-11-06 02:28:02
원래의
585명이 탐색했습니다.

React Memoization Cheat Sheet

React는 불필요한 재렌더링 및 재계산을 최소화하여 구성 요소 성능을 최적화하는 세 가지 주요 메모 도구를 제공합니다.

1. useMemo – 계산된 값을 메모합니다

  • 목적: 계산 결과를 캐시하고 종속성이 변경되는 경우에만 다시 계산합니다.
  • 사용법: 특정 종속성으로만 업데이트해야 하는 비용이 많이 드는 계산 또는 파생 데이터에 사용합니다.

    const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
    
    
    로그인 후 복사
  • 모범 사례:

    • 종속성 배열의 함수 내에서 사용되는 모든 종속성을 포함합니다.
    • useMemo 내에서 새로운 참조(배열, 개체) 또는 인라인 함수를 생성하지 마세요.
    • 참고: 함수에 useMemo를 사용하지 마세요. 함수 참조가 아닌 값을 캐시합니다.

2. useCallback – 메모화 기능 참조

  • 목적: 함수 참조를 캐시하여 렌더링할 때마다 다시 생성되는 것을 방지합니다.
  • 사용법: 안정적인 함수 참조에 사용합니다. 특히 하위 구성 요소에 전달되는 콜백(예: 이벤트 핸들러)에 사용됩니다.

    const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
    
    
    로그인 후 복사
  • 모범 사례:

    • 부실 값을 방지하려면 함수 내에서 사용되는 모든 종속성을 종속성 배열에 포함하세요.
    • useCallback 내에서 인라인 함수를 선언하지 마세요. 메모 기능이 손상될 수 있습니다.
    • 참고: useCallback은 함수에만 사용하세요. 값에 useCallback을 잘못 사용하면 불필요한 함수 호출로 인해 비효율적인 코드가 발생합니다.

3. React.memo – 전체 구성요소 메모하기

  • 목적: props가 변경되지 않은 경우 기능 구성 요소가 다시 렌더링되는 것을 방지합니다.
  • 사용: 상위가 변경될 때 다시 렌더링할 필요가 없는 하위 구성 요소를 최적화하는 데 사용합니다.

    const MemoizedComponent = React.memo(ChildComponent);
    
    
    로그인 후 복사
  • 모범 사례:

    • 안정적인 소품을 받는 부품이나 거의 변하지 않는 소품과 함께 사용하세요.
    • React.memo의 효율성을 극대화하려면 소품(예: 새 개체/배열)을 자주 변경하지 마세요.
    • 참고: useCallbackmemoized 함수와 잘 작동하여 하위 구성 요소에 전달된 props를 안정적으로 유지합니다.

기억해야 할 핵심 사항

  • 값에는 useMemo를 사용하고 함수에는 useCallback을 사용하세요.
    • 함수에 useMemo를 사용하면 안정적인 함수 참조가 아닌 즉시 실행됩니다.
    • 값에 useCallback을 사용하면 함수가 반환되므로 추가 함수 호출로 인해 코드가 비효율적입니다.
  • 메모 요약:
    • useMemo: 계산된 값(함수의 반환 값)을 캐시합니다.
    • useCallback: 함수 참조(콜백)를 캐시합니다.
    • React.memo: 상위 업데이트에서 다시 렌더링되는 것을 방지하기 위해 소품을 기반으로 전체 구성 요소를 캐시합니다.
  • 선택적으로 메모 사용: 메모를 올바르게 사용하면 성능이 향상되지만 과도하게 사용하거나 잘못 사용하면 복잡성이 가중될 수 있습니다.

위 내용은 React 메모화 치트 시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿