React에서 불필요한 렌더링 디버깅 방법

React에서 개발할 때, 구성 요소 재입찰이 예상보다 더 많은 장면을 만날 수 있습니다.이것은 응용 프로그램의 감지 성능에 직접적인 영향을 줄 것이다.
React 갈고리가 도입됨에 따라 개발자들은 무의식중에 재방송을 터치할 수 있는 더 많은 방법을 갖게 되었다.
고맙게도 React는 개발자들에게 불필요한 재방송 원본을 찾을 수 있도록 도구를 제공했다.본고에서 나는 그 중 세 가지를 토론할 것이다. DevTools Profiler, React.memo, React.Profiler.

DevTools 탐색기

DevTools Profiler는 현재 Chrome과 Firefox에서 사용할 수 있는 훌륭한 브라우저 플러그인입니다.특정 기능에 대한 자세한 내용은 문서를 참조하십시오.
React DevTools의 4 번째 버전은 2019년 8월 15일에 발표되었고 "Why did this render?"라는 새로운 기능이 추가되었습니다.

이 도구를 사용하려면 Profiler를 설치하고 "분석 시 각 구성 요소를 렌더링하는 이유"를 열면 됩니다.옵션그리고 프로그램과 상호작용을 할 때 Profiler를 실행하여 불필요한 렌더링이 필요할 수 있는 모든 구성 요소에 집중할 수 있습니다.
탐색기 세션을 마치면 렌더링 지표를 확인하기 위해 각 구성 요소로 깊이 들어갈 수 있습니다."왜 보여요?"제목에서 어셈블리 렌더링/다시 렌더링의 원인 목록을 볼 수 있습니다.
재입찰의 흔한 원인:

갈고리 변경(즉 호출useEffect의useState방법)

아이템 변경(정확한 아이템이 나열됩니다!)

부품의 상위 재입찰

모든 디버깅 도구 중에서 나는 이것이 가장 쉽고 가장 빠른 설정과 사용 도구라고 생각한다.그러나 한 가지 단점은 바뀐 도구의 가치를 검사할 방법이 없다는 것이다.아이템 값을 확인하여 현재 발생하고 있는 변화와 원인을 더욱 잘 이해하는 것이 도움이 된다.
이러한 데이터를 얻으려면 다른 도구를 사용할 수 있습니다: setState.

반응하다메모

React v16.6.0은 기능 구성 요소와 클래스 기반 구성 요소와 함께 사용할 수 있는 새로운 React.memo 방법을 제공하여 React.memo 클래스 구성 요소와 같은 리렌더를 더욱 잘 제어할 수 있도록 합니다.그것은 재발을 통제하는 좋은 도구일 뿐만 아니라, 재발의 원인을 찾으려고 할 때도 유용한 도구이다.
rerenders 디버깅의 관건은 shouldComponentUpdate 의 두 번째 선택 가능한 매개 변수를 사용하는 것입니다. 이것은'isEqual'함수입니다. 이 함수는 두 개의 매개 변수 React.memo 와 prevProps 를 받아들이고 구성 요소를 변경해야 하는지 제어합니다.자세한 내용은 nextProps의React docs를 참조하십시오.
이제 액세스 memo 및 prevProps 를 통해 변경 사항을 쉽게 확인하고 재발의 근본 원인을 확인할 수 있습니다.

const memoizedComponent = React.memo(MyComponent, 
  (prevProps, nextProps) => {

    console.log(prevProps.thing === nextProps.thing);

    /*
      When using this function you always need to return
      a Boolean. For now we'll say the props are NOT equal 
      which means the component should rerender.
    */
    return false;
  }
)

방주: 문제를 발견한 후 수동으로 다시 렌더링을 방지할 수 있지만 근본적인 원인을 처리하는 것을 강력히 권장합니다. 이것은 일반적으로 렌더링을 할 때마다 불필요하게 다시 만드는 도구입니다.그렇지 않으면 nextProps 을 사용하여 각 구성 요소를 보조 테이프로 처리하여 대량의 동일한 검사와 메모리에 저장된 데이터를 초래할 것입니다.

반응하다탐색기

마지막으로 React.Profiler API는 개발자에게 성능 문제를 디버깅하는 데 사용할 수 있는 추가 데이터 포인트를 제공합니다.React.memo가 있으면 개발자는 React.memo 구성 요소로 그들의 JSX 요소를 포장할 수 있습니다. 이 구성 요소는 두 개의 도구가 필요합니다.

id - 분석 중인 부분의 유일한 표지입니다.

onRender - 렌더링할 때마다 호출되는 콜백 함수입니다.리셋 매개변수의 전체 목록을 보려면 docs 을 보십시오.

return (
  <Profiler 
    id="test1" 
    onRender={(...args) => {
      { [1]: phase, [2]: actualDuraction } = args;

      console.log({ phase, actualDuration })
    }}
  >
    <App />
  </Profiler>
);

React.Profiler를 사용하여 ReRender를 디버깅할 때 다음 사항을 확인할 수 있습니다.

초기 렌더링 후 구성 요소가 <Profiler> 단계로 복구되지 않도록 합니다.그것은 시종일관 React.Profiler 이어야 한다.

mount는 초기 렌더링 후에 내려야 합니다.그대로 유지되거나 상승하면 하위 객체를 효과적으로 렌더링할 수 없습니다.

어떤 동작이 다시 인코더를 촉발했는지 이해하기 위해 여러 동작의 시간 스탬프를 추적하고 updated와 관련된 동작을 볼 수 있습니다.

actualDuraction 구성 요소가 다시 시작될 때의 최악의 상황을 알려 줍니다.렌더링을 최적화할 때 가장 높은 값startTime을 가진 구성 요소에 주의해야 합니다.

그렇습니다!디버깅 즐거워요!