Redux higher order components, same as container components

Question

I am trying to wrap my head around higher order components, they are the same as Redux container components. Plus, what is the recommended way to write higher-order components (container components) is through a class that extends React.Component with or without it, as indicated on the redux website.

Answer 1

There is so much written on this subject, so I’ll just try to briefly explain the concept and how it relates to Redux.

HOC ( "" ). , . : , , ..

: , . .

:

function hoc(WrappedComponent) {
    return class HOC extends WrappedComponent {
        render() {
            return super.render();
        }
    }
}

:

function hoc(WrappedComponent) {
    return class HOC extends React.Component {
        render() {
            return (<WrappedComponent {...this.props} extraProp={1} />)
        }
    }
}

, , :

function hoc(WrappedComponent) {
    return (props) => (<WrappedComponent {...props} extraProp={1} />);
}

.

---

Redux, Redux .
connect() HOC, ( ). .
( "" ) .

, : Post , HOC connect() PostContainer.