후크를 사용한 리액트 기능 컴포넌트와 클래스 컴포넌트
React에 후크가 도입되면서 현재 주요 혼란은 후크 및 클래스 컴포넌트와 함께 기능 컴포넌트를 사용해야 하는 시점입니다. 후크의 도움으로 얻을 수 있기 때문입니다.state 부분적인 「」lifecycle hooks이치노저는 다음과 같은 .
- 후크의 진정한 장점은 무엇입니까?
- 후크와 함께 기능 컴포넌트를 사용하는 경우와 클래스 컴포넌트를 사용하는 경우
예를 들어 후크가 있는 함수 컴포넌트는 클래스 컴포넌트와 마찬가지로 퍼포먼스에 도움이 되지 않습니다.를 빼놓을 수 .shouldComponentUpdate구현되었습니다.른른른른 른른른?
Hooks:React.memo ★★★★★★★★★★★★★★★★★」React.lazy작성해야 하는 코드를 줄이고 유사한 액션을 취합하는 데 도움이 됩니다.
이 문서에서는 클래스 대신 Hooks를 사용해야 하는 타당한 이유가 거의 없다고 합니다.
컴포넌트 간에 스테이트풀 로직을 재사용하는 것은 어렵습니다.일반적으로 HOC 또는 renderProps를 사용하는 경우 DevTools에서 애플리케이션을 표시하려고 할 때 여러 계층으로 애플리케이션을 재구성해야 합니다. Hooks는 이러한 시나리오를 피하고 보다 명확한 코드를 지원합니다.
복잡한 컴포넌트를 이해하기 어려워지는 경우가 많다.클래스를 사용하면 서로 관련 없는 코드가 서로 결합되거나 관련 코드가 분할되는 경우가 많아 유지보수가 점점 어려워진다.이러한 경우의 예로는 이벤트청취자가 있습니다.이 경우 청취자를 추가합니다.componentDidMount을 제거하다componentWillUnmount. 하면 이 두 할 수
클래스는 사람과 기계 모두를 혼란스럽게 합니다.클래스와 함께 바인딩과 함수의 호출 컨텍스트를 이해할 필요가 있기 때문에 종종 혼란이 생깁니다.
후크가 있는 함수 컴포넌트는 클래스 컴포넌트만큼 퍼포먼스에 도움이 되지 않습니다.component Update가 구현되어 있지 않기 때문에 재렌더를 생략할 수 없습니다.
는 능능음음음음음음음음음음음음음음 function 와 같이 할 수 .React.PureComponent하여 합니다.React.memo를 두 번째 할 수 .React.memo 수 .
하여 작성할 수는 리액트 클래스 컴포넌트를 할 수 .리액트 는 리액트 클래스 컴포넌트입니다.Hooks기타 유틸리티.후크는 코드의 추출, 테스트 및 재사용에 있어 유연성을 높이는 동시에 클래스의 모든 사용 사례를 커버할 수 있습니다.
훅은 아직 완전히 출하되지 않았기 때문에 중요한 컴포넌트에는 후크를 사용하지 말고 비교적 작은 컴포넌트로 시작하는 것이 좋습니다.클래스를 기능 컴포넌트로 완전히 대체할 수 있습니다.
단, 데이터 취득을 위해 서스펜스가 종료될 때까지 후크가 있는 함수 컴포넌트보다 클래스 컴포넌트를 선택해야 하는 이유 중 하나가 있습니다.useEffect 후크를 사용한 데이터 취득은 라이프 사이클 방법만큼 직관적이지 않습니다.
또한 @DanAbramov는 트위터에서 훅은 서스펜스와 연동되도록 설계되어 있으며 서스펜스가 해소될 때까지 Class를 사용하는 것이 좋다고 언급했다.
후크를 사용하면, 기입에 필요한 코드의 양이 큰폭으로 삭감되어 가독성이 향상됩니다.
다만, 이면에는 숨겨진 프로세스(컴포넌트가 마운트된 경우와 마찬가지로)가 있습니다.즉, 무슨 일이 일어나고 있는지 이해하지 못하면 트러블 슈팅이 어려워질 수 있습니다.라이브 프로젝트에 실장하기 전에, 그것들을 사용해 실험해, 문서를 완전하게 읽어내는 것이 가장 좋습니다.
또한 후크 테스트에 대한 지원/문서도 클래스에 비해 한정되어 있습니다.https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
업데이트 28/08/198 리액트 훅 테스트 라이브러리 및 커스텀 훅을 사용하여 https://github.com/testing-library/react-hooks-testing-library을 테스트합니다.
공식적으로 후크가 수업을 완전히 대신할 것 같나요?언젠가, 하지만 생각해 보세요.훅은 3년 정도(2021년 3월 현재)되어 있고, 그것들을 채용하는 것에는 찬반양론이 있습니다(단점보다 찬반양론이 더 많음).오해하지 마세요)
저는 국가 경영/계급에 대한 경험이 풍부하고 많은 연구와 테스트를 거쳐서 수업과 후크를 잘 알아야 한다는 것을 알게 되었습니다.훅에는 간단한 컴포넌트에는 코드의 일부가 필요하며 HOC의 최적화에 매우 적합합니다.한편, 라우팅, 컨테이너 컴포넌트, 비동기 프로그래밍 등은 클래스가 더 좋은 것 같습니다.
각 테크놀로지가 더 나은 경우는 많이 있을 것입니다만, 특히 100,000 행 이상의 코드와 수백만 명의 사용자가 있는 프로젝트에서 프로그래머가 훅과 클래스를 매우 잘 알고 있어야 합니다.자세한 내용은 이쪽:https://stackoverflow.com/a/60134353/11239755
언급URL : https://stackoverflow.com/questions/53062732/react-function-components-with-hooks-vs-class-components
'source' 카테고리의 다른 글
| 한 페이지에 있는 총 시계 수를 어떻게 세나요? (0) | 2023.03.16 |
|---|---|
| Windows Azure의 경우:웹 역할, 작업자 역할 및 VM 역할이 무엇입니까? (0) | 2023.03.11 |
| 커스텀 정보 및 가격을 사용하여 장바구니에 제품 추가 (0) | 2023.03.11 |
| WordPress + CloudFront Flexible SSL이 리다이렉트 루프(https)로 끝남 (0) | 2023.03.11 |
| JSON 개체가 변경되지 않았음을 확인하는 방법은 무엇입니까? (0) | 2023.03.11 |