기능 가슴 또는 사람들이 그것을 좋아하는 방법: 고차 기능

- 브랭코 미쳤어?
아니 난 절대 아니야!

나는 JavaScript의 미친 것들을 좋아합니다. 그 중 하나는 확실히 기능 가슴입니다. 죄송하지만 이 현상에 대해 더 설명하기 쉽고 재미있는 이름을 찾지 못해 그렇게 부르겠습니다.

Foo()(), 맞습니까? 히히.

뛰어들자!

지금까지 개발자 생활에서 다음과 같은 것을 보았을 것입니다.
connect(mapStateToProps, mapDispatchToProps)(App);
이것이 무엇이며 어떻게 작동하는지 이해하려고 했습니까?

이 connect 함수는 Higher Order Function (HOF) 라고 합니다.

정의에 따르면 HOF는 함수를 매개변수로 수락 및/또는 반환하는 함수입니다.

어떻게 작동합니까?

연결의 첫 번째 가슴은 여러 가지를 받아들입니다. redux 상태 및 작업에 대한 몇 가지 기능과 여기에서 다루지 않는 기타 옵션에 대해서는 다루지 않겠습니다.

두 번째 boob은 기본적으로 반응 구성 요소를 수락하는 연결의 반환 기능입니다.

따라서 연결 기능의 주요 목적은 자식(두 번째 가슴에서 나온 자식)에 대한 유언을 준비하는 것입니다.

testament의 모든 정보(redux 상태 및 작업)는 connect가 막 죽을 때 자식의 props에 바인딩됩니다. 이것이 우리가 props를 통해 redux 상태에 접근하는 이유입니다.

이것은 연결 기능의 정의가 아님을 명심하십시오. 이것은 내 이해에 따라 작동하는 방식에 대한 간단한 설명입니다.

function connect(state, actions) {
    /* testament preparation */
    const preparedTestament = {...};
    return (component) => {
        return <component props={props, …preparedTestament}
    }
};

따라서 결국 connect는 반응 구성 요소를 반환하지만 앞에서 설명한 것처럼 추가된 props가 있는 익명 함수를 반환하므로 connect()() 와 같은 대괄호 2개를 사용하여 호출합니다.

왜 유용한가요?

이 기술은 connect, withRouter 등과 함께 널리 사용되지만 HOF는 사용자 지정 항목에도 사용할 수 있습니다. 예를 들어 반응 앱의 3페이지에 일부 구성요소(알림 사이드바 또는 이와 유사한 것)를 첨부하고 싶지만 4번째와 5번째에는 생략합니다.

예! 물론 반응 외부에서 HOF를 사용할 수 있습니다! 그리고 그것이 진정한 재미가 시작되는 지점입니다!

또는, 또는, 이미 사용하고 있는데도 모릅니다! 맵, 필터링, 정렬, 감소가 익숙한가요? :)

결론

개념으로서의 HOF는 확실히 더 깊은 수준에서 탐구할 가치가 있는 것이므로 사용하는 것을 두려워하지 말고 이해하는 것을 두려워하지 마십시오. 시간이 지날수록 수월해지고, 그에 따라 새로운 지평이 열릴 것입니다. :)

좋은 분들 읽어주셔서 감사합니다. 다음 시간까지!