소품을 기대하지 않는 경우 모든 구성 요소를 React.memo ()로 래핑해야합니까?

Aug 18 2020

React기본적으로 모든 기능 구성 요소에 대해 React.memo를 수행하지 않는 이유는 분명하지만 필요할 때 기능 구성 요소를 직접 래핑해야합니다.

제 경우에는 다음과 같은 구조를 가진 큰 반응 프로젝트가 있습니다.

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

내 모든 비즈니스 로직은 redux useSelector내부에 있으며 구성 요소는 내부적으로 저장소에서 데이터를 가져옵니다.

React.memo루트 수준에서 선택기를 변경하면 전체 앱이 다시 렌더링되므로 모든 자식 구성 요소를로 래핑하는 것이 합리적 입니까?

이전에는 connect사용자 지정 소품과 소품으로 전달 된 값을 구성 요소에 전달하는 저장 값을 비교하는 메모 된 구성 요소를 자동으로 얻었으므로 이제 소품을받지 않는 구성 요소에서 사용 하는 동안 항상 수동으로 수행해야 합니까?React.memouseSelector

답변

1 BryanDowning Aug 18 2020 at 06:08

나는 React.memo소품을 받아들이지 않는 하위 구성 요소에 대해 사용 을 고려해야한다고 주장합니다 . 이 기사를 강력히 추천합니다.https://dmitripavlutin.com/use-react-memo-wisely/

2.1 컴포넌트는 종종 동일한 props로 렌더링
됩니다. React.memo ()에서 컴포넌트를 래핑하는 가장 좋은 경우는 함수 컴포넌트가 자주 그리고 일반적으로 동일한 props로 렌더링 될 것으로 예상하는 경우입니다.

요청하는 구성 요소가 소품을 허용하지 않기 때문에 소품이 변경되지 않습니다. 따라서 사용 React.memo 하면 렌더주기를 피할 있습니다. 동일한 기사에서 다음과 같은 중요한주의 사항에 유의하십시오.

5. React.memo ()는 성능 힌트입니다.
엄밀히 말하면 React는 성능 힌트로 메모 화를 사용합니다.

대부분의 상황에서 React는 메모 된 컴포넌트 렌더링을 피하지만 렌더링을 방지하기 위해 그것에 의존해서는 안됩니다.