HOC와 컴포넌트 랩의 차이점

HOC와 컴포넌트 랩의 차이점

방금 리액트에 있는 HOC를 확인했어그들은 꽤 멋있다.그러나 단순히 컴포넌트를 포장하는 것만으로 동일한 결과를 얻을 수 있지 않습니까?

고차 컴포넌트

이 단순한 HOC은 상태를 속성으로 Composed Component에 전달합니다.

const HOC = ComposedComponent => class extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (<ComposedComponent {...this.state} />);
    }      

}

컴포넌트 포장

이 구성 요소는 상태를 속성으로 하위 구성 요소에 전달합니다.

class ParentComponent extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (
        <div>
          {React.cloneElement(this.props.children, { ...this.state })}  
        </div>
      );
    }      

}

사용법은 조금씩 다르지만 둘 다 똑같이 재사용할 수 있는 것으로 보입니다.

HOC와 this.props.children을 통한 컴포넌트의 실제 차이점은 무엇입니까?둘 중 하나만 사용할 수 있는 예가 있습니까?HOC를 사용하는 것이 좋습니다.이것들은 단지 당신이 좋아하는 맛을 고를 수 있는 선택들인가요?

고차 컴포넌트(HOC)와 컨테이너 컴포넌트는 다릅니다.이들은 서로 다른 사용 사례를 가지고 있으며 유사하지만 다른 문제를 해결합니다.

HOC는 믹스인과 비슷합니다.장식된 구성 요소가 인식하는 기능을 구성하는 데 사용됩니다.이는 어린이를 감싸고 어린이가 바보가 되도록 하는(또는 컨테이너의 장식된 기능을 인식하지 못하는) 컨테이너 구성요소와 반대됩니다.

소품을 옮길 때 컨테이너가 자녀에게 기능을 추가할 수 있는 것은 사실입니다.하지만, 이것은 보통 아이들에게 전해지는 소품들의 형태이다.컨테이너에서는 이미 작성된 요소에 단순히 소품을 추가할 수 없다는 제한 때문에 이 또한 어색합니다.

그래서, 만약 당신이 아이에게 새로운 소품을 추가하고 싶다면this.props.children, 를 사용해야 합니다.cloneElement이것은 요소를 다시 작성해야 하기 때문에 효율적이지 않습니다.

또, HOC는 컴포넌트를 작성하기 위한 단순한 방법(공장 출하시)입니다.따라서 이 문제는 외부 환경에서도 발생할 수 있습니다.render.

고차 컴포넌트의 동적화가 필요한 경우 Container 접근 방식이 더 효과적이라는 점을 덧붙이고 싶습니다.

예를 들어 HOC를 정의할 수 있는 렌더링 요소가 4개 있는 경우 내부에 상위 컴포넌트를 작성합니다.render단, 렌더 내의 고차 컴포넌트를 호출하면<HigherOrderComponent/>모든 렌더링에 다시 마운트하는 것은 매우 나쁜 생각이 됩니다.

이것은, https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method 에 기재되어 있습니다.

그러나 일반적으로 나는 HOC 접근법을 택할 것이다.

언급URL : https://stackoverflow.com/questions/36960675/difference-between-using-a-hoc-vs-component-wrapping