es6의 데코레이터는 어떻게 작동합니까?

Question

나는 REDUX 학습이 서명에있는 문서 사용 connect의 예를 볼 해요 :

const VisibleTodoList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList) 

그러나 기타의 repos에서 다른 장소에서 나는 또한 this-

@connect(mapStateToProps, mapDispatchToProps) 

I 봤어요 같은 것을 얻지 만 장식 자의 서명은 어떻게 작동합니까? 연결 결과에 변수를 설정하는 것처럼 보이지 않으므로 @connect의 기능은 어디로 가고 할당됩니까?

Answer 1

데코레이터는 다음에서 작동하는 고차 함수입니다.

이

의 일종 (정말 종류의, 그것은이다) 부정하지만, 우리는 당신이 단순한 값을 사용하여 추론 할 수있는 형식이 간소화 경우 :

const add = x => y => x + y; 

추가가 예상하는 기능입니다 x을 반환하고 y,
을 반환 한 다음 x + y을 반환하는 함수를 반환합니다.
당신은

add(1)(2); // 3 

또는

const add1 = add(1); 
add1(2); // 3 

그러나 우리는 마지막 값을 전달하는 기대하지 JS 말하는 몇 가지 방법을 가졌으나 단지가 무슨 실행하면 어떤처럼 호출 할 수 있습니다 다음으로 보는 것. 내가 말했듯이

@add(1) 
2; // 3 

@add1 
2; // 3 

,이 예는 정말 (데코레이터 기능이 정말 클래스 나 메소드 또는 매개 변수를 수정로, 너무 많은 두 숫자를 추가하기위한 의미가되지 않을 것이다는 점에서)이 방식으로 작동,하지만하지 않습니다 데코레이터의 기본 개념입니다.

@connect(mapProps, mapHandlers) 
MyComponent; 

는 [의

connect(mapProps, mapHandlers)(MyComponent); 

Answer 2

이론적으로 이해가되지 않는다면 시각적으로 도움이 될 것입니다. 당신은 redux-form을 사용하고 페이지의 양식에 연결하고 반응 자동 완성을 사용한다고 가정 해 보겠습니다. 당신은 그렇게 사용하는 데코레이터를 사용할 수 있습니다.

@connect(mapStateToProps, mapDispatchToProps) 
@autofill 
@reduxForm({form: 'somethingForm', enableReinitialize: true}) 
class Something extends React.Component { 
    .... 
} 

장식없이 이것의 상당

class Something extends React.Component { 
    .... 
} 
Something = reduxForm({ 
    form: 'somethingForm', 
    enableReinitialize: true 
})(Something); 
Something = connect(mapStateToProps, mapDispatchToProps)(autofill(Something)); 

그래서 이런 식으로 생각 될 것이다. 위에서 아래까지는 각 기능에 대한 적용 측면에서 최우선 순위입니다. 당신은 reduxForm을 적용한 다음 자동 채우기를 적용한 다음 두 경우 모두 연결합니다. 데코레이터를 사용하면 코드를 더 간단하게 작성하고 덜 복잡한 코드도 만들 수 있습니다.