Re:Vue.js: the good, the meh, and the ugly
by porker on Friday July 06, 2018 @03:05AM
(#17469535)
Is there a blog post explaining higher order components in more detail, preferably with examples?
[ Parent
| on HN ]
Higher Order Components are like Aspect Oriented Programming - it takes a component and adds some stuff to it. It can add that stuff to any kind of component. That's all you really need to know.
Examples of HOC are the connect() call from Redux, or the withNavigation() from React Navigation, or injectIntl() from React-Intl. These respectively add Redux functionality, navigation functionality, and internationalization functionality to your component.
I think the name "Higher Order Component", like many things in the React world, is poorly chosen and actually obscures what it is, how it works, and makes it look more intimidating than it really is. It's technically correct (like 'reducer' is), but communicates nothing.
I agree.
It's effectively a replacement for the old React mixin system.
It happens to use functional programming methods, but that's an implementation detail.
Yep, lots! See the "React Component Composition" section of my React/Redux links list: https://github.com/markerikson/react-redux-links/blob/master...
The doc is very detailed with good examples : https://reactjs.org/docs/higher-order-components.html