여러 HOC 래퍼를 사용하여 React 컴포넌트를 내보내시겠습니까?

여러 HOC 래퍼를 사용하여 React 컴포넌트를 내보내시겠습니까?

스타일 텍스트를 표시하는 React 컴포넌트가 있는데 네트워크 리소스를 로드하고 WebSocket 입력을 수신하며 알림을 표시하도록 하고 싶습니다.이를 위해 다음 각 항목에 대해 상위 컴포넌트 래퍼 함수를 작성합니다.withResource,withSocket,그리고.withNotifications.

컴포넌트를 수출할 때 이것이 맞습니까?

class TextComponent extends React.Component {
  ...
}

export default withResource(withSocket(withNotifications(TextComponent)))

사용할 수 있습니다.composeredex 또는 recompose를 사용합니다.예를 들어 다음과 같습니다.

리덕스

import { compose } from 'redux'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)

재구성

import { compose } from 'recompose'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)

이것은 함수 구성이라고 불리며 수학적 배경(y와 x 변수의 명명 및 함수 역실행의 원인이 된다)을 가지고 있습니다.변수의 추가 정의와 심층적인 함수 래핑 수준을 제거하여 기술 함수 호출 방식의 복잡성을 줄입니다.

직접 작성하거나 라이브러리에서 다음과 같이 사용할 수 있습니다.lodash,rambda,redux,기타.

const compose = (...rest) => x => rest.reduceRight((y, f) => f(y), x)

퍼스트 클래스 기능에서의 사용:

const increment = (numb) => numb + 1
const multiplyBy = (multiplyNum) => (num) => multiplyNum * num

compose(increment, multiplyBy(3), increment)(4)// 4 > 5 > 15 > 16

고차 컴포넌트에서의 사용:

compose(withRouter, withItems, withRefs)(Component) 

또 다른 간단한 해결책은 다음과 같이 HOC 컴포넌트를 서로 겹쳐 놓는 것만으로 이를 3단계로 수행할 수 있습니다.

const firstHOC = withNotifications(TextComponent);
const secondHOC = withSocket(firstHOC);
export default withResource(secondHOC);

언급URL : https://stackoverflow.com/questions/48569635/exporting-react-component-with-multiple-hoc-wrappers