반응 앱 성능 향상은 긍정적 인 사용자 경험에 중요합니다. 이 기사는 수많은 생산 반응 응용 프로그램을 최적화함으로써 얻은 7 가지 입증 된 성능 패턴을 간략하게 설명합니다.

---

1. usememo 및 usecallback 와의 메모 삽입 :

문제 : 변하지 않은 소품 또는 상태로 인한 불필요한 재 렌더러.

솔루션 : 캐시 계산적으로 비싼 작업 및 기능 참조.

const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return ;
};

모범 사례 : 불필요한 하위 트리 업데이트를 방지하기 위해 아동 구성 요소에 react.memo 와 함께 사용합니다. 복잡한 계산 (정렬, 필터링), 콜백은 최적화 된 어린이에게 전달되었으며 안정적인 컨텍스트 제공 업체 값에 이상적입니다.

---

2. 게으른로드 및 코드 분할 :

문제 : 첫 번째 콘텐츠 페인트에 영향을 미치는 큰 초기 번들 크기 (fcp)

const HeavyChartLibrary = React.lazy (() => import ( './ ChartComponent')); const dashboard = () => ( }> {showcharts && } );

고급 :

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

const Dashboard = () => (
  }>
    {showCharts && }
  
);

대형 데이터 세트에 대한 가상화 된 목록 :

---

3. 문제 : 수천 개의 항목이 Dom을 압도합니다.

솔루션 :

React-Window 가시적 인 항목 만 렌더링합니다.

import {fixtsizelist} 'react-Window'; const biglist = ({items}) => ( {({index, style}) => (

)} );

import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  
    {({ index, style }) => (
      
...
    )}
  
);

문제 : Cascading Re-Renders를 일으키는 여러 상태 업데이트. 솔루션 :

레버리지 18의 자동 배치.

---

4. React 18 :

setCount (1); setText ( '업데이트'); // 단일 리 렌더

pre-react 18 또는 복잡한 시나리오의 경우 :

Atomic State 업데이트를 위해 usereducer 를 사용합니다.

API 호출 Debouncing :

setCount(1);
setText('Updated'); // Single re-render

문제 : 빠른 사용자 입력 (예 : 검색 막대)의 과도한 API 요청. 솔루션 :

사용자 정의

---

usedebounce

hook.
5. import {useeffect, usestate} '에서'react '; const usedeBouncedValue = (값, 지연) => { const [debouncedValue, setDeBouncedValue] = usestate (value); useeffect (() => { const handler = settimeout (() => setDeBouncedValue (value), Delay); return () => cleartimeout (handler); }, [값, 지연]); 반환 DePouncedValue; };

pro 팁 :

abortcontroller

와 결합하여 보류중인 요청을 취소합니다.

최적화 된 컨텍스트 API :

setCount(1);
setText('Updated'); // Single re-render

문제 : 관련이없는 변경으로 인해 컨텍스트 소비자의 불필요한 재 렌즈. 솔루션 :

분할 컨텍스트 및 공급자 값을 기억합니다.

---

6. 낙관적 ui 업데이트 :

문제 :

API 응답 대기로 인해 느린 UI.

솔루션 :

오류에 대한 즉각적인 시각적 피드백과 롤백을 제공합니다.

---

7. Performance Checklist :

React DevTools Profiler를 가진 프로파일 리 렌더. 소스 -MAP-Explorer를 사용하여 번들 크기 분석.

Chrome의 성능 탭 (CPU 스로틀)으로 테스트. 증분 하중 구현.

---

게으른 하중으로 이미지/미디어 최적화.

중요한 콘텐츠에 대한 서버 측 렌더링을 고려하십시오.

1. 기억하십시오 :
프로파일 먼저, 두 번째를 최적화하십시오! 이러한 기술은 다양한 React 프레임 워크 (Next.js, Gatsby 등)에 적용됩니다.