Vue: 토론: HOC를 만드는 가장 좋은 방법

안녕하세요 @eu81273

이 프로젝트에 관심을 가져주셔서 감사합니다.

그러나 귀하의 문제는 사용/지원 질문이며 문제 추적기는 버그 보고서 및 기능 요청 전용으로 예약되어 있습니다( 기고 가이드 에 설명되어 있음).

포럼 , 스택 오버플 로 또는 디스코드 채팅 에 질문하고 기꺼이 도와드리겠습니다.

FWIW, 나는 개인적인 관심에서 살펴 보았습니다. 이것은 100%의 경우에 작동해야 합니다.

const HOC = WrappedComponent => ({
  props: typeof WrappedComponent === 'function' // accept both a construtor and an options object
    ? WrappedComponent.options.props 
    : WrappedComponent.props,
  render (h) {
    // reduce all slots to a single array again.
    const slots = Object.keys(this.$slots).reduce((arr, key) => arr.concat(this.$slots[key]), []);
    return h(WrappedComponent, {
      attrs: this.$attrs,
      props: this.$props,
      on: this.$listeners,
    }, slots);
 }
});

솔루션에 가장 가깝기 때문에 귀하의 예에서 HOC04를 편집했습니다.

https://jsfiddle.net/Linusborg/o7yvL2jd/22/

편집: 여전히 슬롯 문제, 조사 중...

나는 그것을 해결했을 수도 있습니다 : https://jsfiddle.net/BogdanL/ucpz8ph4/. 슬롯은 이제 하드코딩되었지만 해결하기가 쉽지 않습니다.

솔루션이 @lbogdan의 방법을 따르는 것 같지만 createElement는 scopedSlots 를 사용할 수 있는 것처럼 슬롯을 가져오는 방법이 있어야 합니다.

그러나 HoC를 만드는 것은 _여전히_ 많은 노력입니다. 리액트를 사용하면 WrappedComponent를 소품으로 렌더링하기만 하면 되지만 기억해야 할 사항이 많이 있습니다.

방금 아주 간단한 해결책을 생각해 냈습니다... 여기에 빠진 것이 있으면 알려주십시오.

const HOC06 = WrappedComponent => Vue.extend({
   mounted () {
      console.log('mounted 6')
   },
   ...WrappedComponent
})

@LinusBorg 및 @lbogdan 에서 제공한 예제를 기반으로 슬롯이 있는 구성 요소를 처리할 수 있는 가장 최소한의 HoC 구현은 다음과 같습니다.

const HoC = WrappedComponent => ({
    props: typeof WrappedComponent === 'function' 
        ? WrappedComponent.options.props 
        : WrappedComponent.props,
    render (h) {
        const slots = this.$slots;
        const scopedSlots = {};
        Object.keys(slots).map(key => (scopedSlots[key] = () => slots[key]));

        return h(WrappedComponent, {
            attrs: this.$attrs,
            props: this.$props,
            on: this.$listeners,
            scopedSlots,
        });
     }
});

@blocka가 언급했듯이 vue.js 로 HoC를 만드는 것은 여전히 ​​많은 노력입니다.

@eu81273

const HOC06 = WrappedComponent => Vue.extend({
   mounted () {
      console.log('mounted 6')
   },
   ...WrappedComponent
})

이것은 당신의 테스트를 통과한 것 같습니다, 그렇죠? 물론 WrappedComponent가 생성자인지 객체인지에 따라 조정해야 하지만 슬롯, 이벤트 또는 소품을 전달할 필요는 없습니다.

vue.js로 HoC를 만드는 것은 여전히 ​​많은 노력입니다.

슬롯 문제를 제외하고 이것은 Vue 가 React보다 더 복잡한 API를 가지고 있다는 사실 때문이며, 이 시나리오에서는 단점입니다. 저는 이러한 종류의 사용 사례에서 React 최소 API를 존경합니다. Vue는 약간 다른 디자인 목표로 설계되었으므로 HOC는 React에서처럼 쉽게 나오지 않습니다.

그러나 이 초기 설정을 래핑하는 createHOC() 도우미 함수를 만드는 것은 매우 간단해야 합니다. 그렇지 않나요?

글쎄, 그것은 최종 목표가 무엇인지에 달려 있습니다. 내가 이해하는 바에 따르면 HoC의 목표는 원래 구성 요소(WrappedComponent)를 변경(장식)하여 소품, 메서드, 이벤트 리스너 등을 추가(또는 주입)하는 것입니다. HOC06 변형은 구성 요소 정의만 변경하며 인스턴스화되는 방식은 변경하지 않습니다.

@blocka HOC 의 목표는 종종 상태(예: redux/vuex에서)를 가져와 래핑된 구성 요소의 소품에 주입하는 것입니다. 이는 귀하의 접근 방식에서 작동하지 않습니다.

@LinusBorg 맞습니다. 나는 그것이 사실이기에는 너무 좋고 내가 명백한 것을 잊고 있다는 것을 알고 있었습니다.

나는 이것이 Vue에서 실제 사용 사례 HoC를 구현하는 좋은 예라고 생각합니다: https://github.com/ktsn/vuex-connect.

Vue Hocs는 굉장한 플러스가 될 것입니다(거의 항상 모든 vue 대 반응 토론에서 제기되기 때문에). vue-hoc-creator 패키지를 개발하기 위해 공식 리포지토리를 만들 수 있습니까? 그렇게 하면 강력하고 지원되는 구현 작업을 수행할 수 있습니다.

Btw, 더 나은 방법이 있습니다. HOC 자체 대신 상위 구성 요소의 $createElement를 사용하십시오. 이렇게 하면 자식이 슬롯을 올바르게 해결하게 됩니다.

https://jsfiddle.net/o7yvL2jd/23/

귀엽긴 하지만 공식 도구가 있어야 하는 더 큰 이유는
이 코드를 계속 재발명하지 마십시오.

2017년 7월 30일 일요일 오후 4시 33분, Thorsten Lünborg [email protected]
썼다:

Btw, 더 나은 방법이 있습니다. 상위 구성 요소에서 $createElement 사용
HOC 자체 대신 - 이것은 자식이 슬롯을 올바르게 해결하도록 합니다.

https://jsfiddle.net/o7yvL2jd/23/

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/vuejs/vue/issues/6201#issuecomment-318927628 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AACoury4Fix2jsX_lyTsS6CYOiHJaOuVks5sTOiugaJpZM4Oh0Ij
.

아직 공식적인 해결책을 내놓지 못해 죄송합니다. 그래도 귀엽다고 생각하니 다행입니다.

내 솔루션도 완벽하지 않습니다. 해결해야 할 다른 문제가 있습니다. 즉, 범위 지정 슬롯이 내 최신 트릭으로 작동하지 않습니다.

편집: 오, 신경 쓰지 마세요. 작동합니다.

공식 솔루션은 아마도 완료될 것입니다. 적어도 저는 그렇게 예상합니다. 그러나 철저하게 생각하고 테스트해야 합니다.

좋아, 그래서 나는 이것을 더 쉽게 만드는 방법을 가지고 놀았다.

여기를 보십시오: https://jsfiddle.net/Linusborg/j3wyz4d6/

API가 매우 대략적인 아이디어 스케치이기 때문에 만족하지 않지만 할 수 있어야 하는 모든 것을 할 수 있습니다.

import { createHOC, createRenderFn, normalizeSlots } from 'vue-hoc'
const Component = {
  props: ['message']
  template: `<p>{{message}}</p>`
}
const HOC = createHOC(Component)

createHOC 는 다음을 처리합니다.

• 구성 요소에서 소품 복사
• 적절한 슬롯 해결을 위해 부모로부터 $createElement 를 교환합니다.
• 이름을 추가하다
• 두 번째 인수가 제공되지 않으면(위의 예와 같이) 구성 요소를 렌더링하고 전달합니다.
  
  
  
  • 소품
  
  
  • 속성
  
  
  • 청취자
  
  
  • 일반 슬롯
  
  
  • 범위 슬롯
  
  

물론 그 자체로는 그다지 유용하지 않습니다. 따라서 간단한 Component 객체인 두 번째 인수에서 재미가 발생합니다.

렌더링 기능을 직접 작성하고 싶다면 당연히 할 수 있습니다. props, attrs 또는 listeners를 확장하려는 경우 createRenderFn 도우미를 사용할 수 있습니다. 위에서 설명한 기본 렌더링 기능을 생성하지만 attrs , props 또는 listeners 부모로부터 전달한 모든 것을 병합합니다.

const HOC = createHOC(Component, {
  mounted() { 
    console.log(`lifecycle hooks work, it's simply component options`) 
  },
  render: createRenderFn(Component, {
    props: {
      message: 'Hello from your HOC!'
    }
  }
})

자체 렌더 함수를 작성하려면 normalizeSlots 도우미를 사용하여 개체를 this.$slots 에서 전달할 적절한 배열로 변환할 수 있습니다.

const HOC = createHOC(Component, {
  render(h) {
    return h(Component, {
      props: { message: 'hi from HOC'}, // nothing from parent will be passed on
    }, normalizeSlots(this.$slots))
  }
})

댓글 원합니다 :)

@LinusBorg 아주 좋아요!

내가 도움이 될 것이라고 생각하는 것은 실제 HoC 사용 사례를 제시하고 이러한 기본 요소를 사용하여 문제를 해결하는 것입니다.

전적으로.

이 문제를 언급하고 있습니다(EDIT(mybad): https://github.com/vuejs/vuejs.org/issues/658).
문서화되지 않은 $createElement API를 사용하고 있으므로 플러그인 개발자를 위해 문서화하는 것이 좋습니다.

귀하의 링크가 잘못되었습니다(2014년의 문제에 정말로 링크하고 싶지 않은 경우).

그러나 예, 기술적으로 $ceateElement API는 여전히 API 페이지에 없습니다.

@AlexandreBonaventure 그 문제는 vue 0.x 일부터입니다. :웃다:
또한 createElement 는 https://vuejs.org/v2/guide/render-function.html#createElement -Arguments에 문서화되어 있습니다.

이 함수는 render 함수의 인수로 문서화되어 있지만 this.$createElement 를 통해 사용할 수 있는 것은 아닙니다. vuejs/vuejs.org/issues/658에 이에 대한 미해결 문제가 있습니다.

@LinusBorg 하지만 기본적으로 render() 함수로 보내는 것과 같은 함수죠?

정확히 동일합니다. 이 인스턴스 메서드를 통해 렌더링 기능 외부에서도 사용할 수 있다는 것이 명확하게 문서화되지 않았습니다.

나는 위의 예를 가지고 놀고 있으며 더 복잡한 시나리오에서 사용할 때 몇 가지 문제가 있으므로 공식 저장소가 필요합니다. 몇 가지 메모:

• createRenderFn은 attrs/props/listeners가 함수인지 확인하고 평가해야 합니다. 이렇게 하면 기존 props를 기반으로 props 등을 동적으로 설정할 수 있습니다.
• 구성 가능성을 위해 component는 두 번째 매개변수여야 하며 전체 createHOC 메서드가 커리링된 경우 여러 임시 작성자를 쉽게 연결할 수 있습니다.
• hoc이 믹스인으로 추가되기 때문에 2개의 hoc을 함께 연결하려고 하면(예: withDefaultProps(withProps(component, {}), {}) 두 번째 hoc은 부모의 props 예제 에 액세스할 수 없습니다.

안녕하세요 여러분, 저는 이것의 구현을 작성하는 방법을 찾고 있었습니다.
https://github.com/jackmellis/vue-hoc/tree/develop
어떻게 생각하는지 알려주시면 곧 게시하도록 하겠습니다. 나는 또한 recompose 스타일의 패키지를 작성하는 것에 대해 생각하고 있습니다.

재구성 스타일 패키지가 좋습니다. 정말 뭔가를 사용할 수 있었다
최근 withState처럼.

2017년 8월 19일 토요일 오전 5시 50분에 Jack [email protected] 은 다음과 같이 썼습니다.

안녕하세요 여러분, 저는 이것의 구현을 작성하는 방법을 찾고 있었습니다.
https://github.com/jackmellis/vue-hoc/tree/develop
어떻게 생각하는지 알려주시면 곧 게시하도록 하겠습니다. 나는 또한 해요
재구성 스타일 패키지를 작성하는 것에 대해 생각하고 있습니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/vuejs/vue/issues/6201#issuecomment-323513287 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AACoumQWQMgpVeIvzJ3Ti8A4kLBD04Hhks5sZq_zgaJpZM4Oh0Ij
.

@jackmellis 이 일을 주도해 주셔서 감사합니다 :)

이전에 제공한 피드백에 대한 몇 가지 생각:

• 나는 카레 버전이 좋은 점이며 어떤 면에서 "기본"이어야 한다고 생각합니다. 그것이 HOC가 일반적으로 수행되는 방식이기 때문입니다. 그렇지 않습니까?
• 믹스인 문제에 대한 좋은 점. 이것을 완화하는 방법을 이미 알고 있습니까? 지금은 없지만 Vue.config.optionsMergeStrategies 를 사용하여 만든 커리 변형 조합에서 완화할 수 있어야 한다는 직감이 있습니다.

네이밍도 고민했다. 저는 createRenderFn 가 마음에 들지 않습니다. renderComponentWith 와 같은 것은 다른 노드에 포함시키는 시나리오에서 더 의미 있고 더 합리적입니다.

render(h) {
  return h('DIV', {staticClass: 'some-styling' }, renderComponentWith({ props: {... } }))
}

• 결국 나는 둘 다 선택했다. 따라서 createHOC 는 구성 요소 우선 비 커리이고 커리 변형 createHOCc 이 있습니다. React 생태계는 OOP 프레임워크처럼 작동하는 Vue와 달리 매우 기능 중심적입니다. 따라서 Vue의 나머지 부분과 일관성을 유지하면서도 여전히 기능적 대안을 제공하는 것이 가장 좋다고 생각합니다.
• 나는 이것을 처리하기 위해 몇 가지 코드를 추가했습니다. 전체 임시를 믹스인으로 사용하는 대신 optionsMergeStrategies를 사용하여 임시와 옵션을 수동으로 병합합니다. 유일한 문제는 optionsMergeStrategies가 마지막 매개변수로 vm을 예상하지만 인스턴스화 전에 병합을 수행하므로 vm이 없다는 것입니다.
• 저는 createRenderFn 에 매우 만족합니다. 그것이 바로 그것이 하는 일이기 때문입니다. 하지만 이것을 합칠수록 사람들이 직접적으로 사용하지 않을 것이라고 생각합니다. 일반적인 사용법은 다음과 같습니다.

const hoc = createHOC(
  Component,
  {
    created(){
      /* ... */
    }
  },
  {
    props: (props) => ({
      ...props,
      someProp: 'foo'
    })
  }
);

아마도 내가 당신의 예를 잘 이해하지 못합니까?

아마도 내가 당신의 예를 잘 이해하지 못합니까?

아니요, 당신이 올바른 길을 가고 있다고 생각합니다. 마지막 답변 이후에 그것에 대해 더 생각했을 때 내 생각이 비슷한 방향으로 가고 있었습니다.

초기 POC에서 사람들이 렌더링된 구성 요소 주위에 추가 마크업을 추가할 수 있도록 포함했지만 UI도 가져오기 때문에 더 이상 HOC가 아니라는 것을 의미합니다...

예, 귀하가 추가 콘텐츠를 렌더링하려고 시도하고 있다고 생각합니다. HOC 영역을 벗어났고 이를 처리하기 위해 SFC를 생성할 수도 있습니다.

방금 npm에 vue-hoc 를 게시했습니다!

나는 또한 vue-compose 에 대한 작업을 하고 있는데 이는 빠른 문서화 세션이 준비되지 않은 상태에서도 마찬가지입니다. 재구성과 유사하지만 Vue는 계산 캐싱과 같은 많은 영리한 작업을 처리하고 this 사용을 권장하므로 실제로 복잡한(또는 기능적 스타일) 구문이 필요하지 않습니다.

참고로

https://www.npmjs.com/package/vue-compose

FWIW: https://vuejs.org/v2/api/#extens

extends 는 다르게 작동하지만 유사한 결과를 얻는 데 사용할 수 있습니다. 사실입니다.

@jackmellis 프로젝트가 견고한 토대를 제공한다고 생각하기 때문에 이 글을 닫겠습니다. HOC를 코어에 생성하는 방법을 포함할 생각은 없습니다. 주로 mixins/Extends에 비해 큰 이점이 없기 때문입니다.

주로 mixins/Extends에 비해 큰 이점을 보지 못하기 때문입니다.

@LinusBorg React는 이미 mixin 를 포기했으며 HOC는 많은 이점을 제공합니다.

이 기사에서는 다음과 같은 이점을 분석했습니다.

• 구성 요소와 해당 믹스인 간의 계약은 암시적입니다.
• 단일 구성 요소에서 더 많은 믹스인을 사용하면 충돌하기 시작합니다.
• 믹스인은 구성 요소에 더 많은 상태를 추가하는 경향이 있지만 더 적은 것을 위해 노력해야 합니다.
• ....

Vue 팀은 HoC 지원을 더 신중하게 고려해야 한다고 생각합니다.... 쉽지는 않지만(Vue는 이런 식으로 설계되지 않은 것 같습니다).

나는 HoC가 그렇게 우월한 개념인지 확신하지 못한다. 예를 들어 "암시적 계약" 잠재적 충돌은 HoC에서도 발생할 수 있습니다.

이에 대한 React-router 관리자의 이 강연을 참조하십시오. https://www.youtube.com/watch?v=BcVAq3YFiuc

그렇다고 그들이 나쁘다고 생각하지도 않고 많은 상황에서 유용합니다. 그들은 React 세계에서처럼 칭찬받는 마법의 총알이 아니지만 나름의 단점이 있습니다.

위의 논의에서 분명히 알 수 있듯이 Vue의 API와 기능이 더 광범위하고 더 많은 엣지 케이스를 처리해야 하기 때문에 Vue에서 HoC를 구현하는 것은 React에서만큼 간단하지 않습니다.

Vue에서 아무 것도 깨뜨릴 필요가 없는 한 이것을 개선하는 방법에 대해 확실히 말할 수 있습니다. HoC는 제 생각에 큰 변화를 일으킬 가치가 없습니다.

666

슬롯이 있는 구성 요소를 처리할 수 있는 가장 최소한의 HoC 구현은 다음과 같습니다.

function hoc(WrappedComponent) {
  return {
    render(h) {
      return h(WrappedComponent, {
        on: this.$listeners,
        attrs:this.$attrs,
        scopedSlots: this.$scopedSlots,
      });
    },
  };
}

위의 답변과 비교하여,

• 소품 구성은 필요하지 않으며 this.$attrs에서 자식으로 전달할 수 있습니다.
• 추가 슬롯은 필요하지 않습니다. this.$scopedSlots에는 v2.6.0+ 이후 의 슬롯이 포함되어 있습니다.

나는 확인하기 위해 예 를 썼다